NoUiSlider不可见

Question

我正准备在我的react应用程序中使用noUiSlider。我已经在我的componentDidMount方法中完成了初始化，但是noUiSlider是不可见的。我在控制台中没有得到任何错误。元素列表还显示nouislider出现在页面上，但我看不到它。

import noUiSlider from 'nouislider'


class AppBarComponent extends Component {
componentDidMount(){

    var noUi_slider = document.getElementById('noUiSlider');

    $(function () {

    noUiSlider.create(noUi_slider, {
        start: [20, 80],
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });
}

componentWillUnmount(){}


render() {
    return (

        <div>
        <div id="noUiSlider" className="bg-success"></div>
        </div>
);
}
};