Javascript NoUiSlider不可见

我正在尝试在react应用程序中使用noUiSlider。我已经在componentDidMount方法中完成了初始化，但是noUiSlider不是visibble。我在控制台中没有收到任何错误。元素列表还显示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>
);
}
};

从“noUiSlider”导入noUiSlider
类AppBarComponent扩展组件{
componentDidMount（）{
var noUi_slider=document.getElementById（'noUiSlider'）；
$（函数（）{
创建（努伊苏滑块{
开始：[20,80]，
连接：是的，
范围：{
“min”：0，
“最大”：100
}
});
}
componentWillUnmount（）{}
render（）{
返回(
);
}
};

要创建的第一个参数是“noUi\u滑块” 但你的部门id是“noUiSlider” 这些拼写完全相同