NoUiSlider not visible

Question

I am truing to use noUiSlider in my react application. I have done the initialization in my componentDidMount method but noUiSlider is not visibble. I am not getting any error in console. The element list also shows that nouislider is present on page, but I cannot see it.

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

score -2 · Answer 1 · edited Mar 09 '19 at 07:10

-2

Your first arg to create is "noUi_slider" but your div id is "noUiSlider" Spell these exactly the same.

edited Mar 09 '19 at 07:10

Nisarg Shah

14,151
6
34
55

answered Mar 09 '19 at 02:08

user1343035

245
3
13

NoUiSlider not visible

1 Answers1