多个noUiSlider实例化问题

Question

我想在一个页面中创建多个noUiSliders，但是我得到这个错误“noUiSlider.create需要一个单一的元素”。

基本上，我从不同的功能实例化两个（或更多）滑块（不同类），但我得到上述错误。

任何有此插件经验的人？

下面是一个例子：

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 1

getElementsByClassName返回一个nodeList，而不是一个单一的元件。您可以使用以下任意选项：

• 向元素添加一个id并使用getElementById;
• 取nodeList中的第一个元素：document.getElementsByClassName（'slider2'）[0];
• 使用document.querySelector('.slider2')，其中将返回单个元素;