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

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

• javascript
• jquery
• html
• css
• nouislider

• 1 Just a guess, but since getElementsByClassName returns a collection even if there is only one elment by that class, try document.getElementsByClassName('slider1')[0] – tobiv Commented Nov 22, 2016 at 20:57

1 Answer 1

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;