javascript - 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>
);
}
};

Answer 1

您要创建的第一个参数是“noUi_slider” 但你的 div id 是“noUiSlider” 拼写完全相同。