javascript - 多个 noUiSlider 实例化问题

Question

我试图在一个页面中创建多个 noUiSlider，但我收到此错误“noUiSlider.create 需要一个元素”。

基本上，我从不同的函数中实例化了两个(或更多) slider (具有不同的类)，但我遇到了上述错误。

有人对这个插件有一些经验吗？

这是一个例子:

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')，将返回单个元素；