javascript - 多个noUiSlider实例化问题

我正在尝试在一个页面中创建多个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 ]
      }
 });
 };

最佳答案

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


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