Beppe Beppe - 14 days ago 7
HTML Question

multiple noUiSlider instantiations issue

I'm trying to create multiple noUiSliders in one page, but I'm getting this error "noUiSlider.create requires a single element".

Basically, I'm instantiating two (or more) sliders (with different class) from different functions but I'm getting the above errors.

Anyone with some experience with this plugin?

Here is an example:

var Slider1Handler = function(){

var slider1 = document.getElementsByClassName('slider1');
noUiSlider.create(slider1, {
start: [ 0 ],
connect: [true, false],
step: 1000,
tooltips: true,
orientation: "horizontal",
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
};

var Slider2Handler = function(){

var slider2 = document.getElementsByClassName('slider2');
noUiSlider.create(slider2, {
start: [ 0 ],
connect: [true, false],
step: 1000,
tooltips: true,
orientation: "horizontal",
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
};

Answer

getElementsByClassName returns a nodeList, not a single element. You can use any of the following options:

  • Add an id to the elements and use getElementById;
  • Take the first element in the nodeList: document.getElementsByClassName('slider2')[0];
  • Use `document.querySelector('.slider2'), which will return a single element;