多个 noUiSlider 实例化问题

Question

我试图在一个页面中创建多个 noUiSliders，但出现此错误 "noUiSlider.create requires a single element"。

基本上，我从不同的函数中实例化了两个（或更多）滑块（具有不同的 class），但我遇到了上述错误。

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

这是一个例子：

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 return是一个nodeList，不是单个元素。您可以使用以下任一选项：

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

多个 noUiSlider 实例化问题

multiple noUiSlider instantiations issue

html

javascript

css

jquery

nouislider