複数のnoUiSliderインスタンスの発行

Question

複数のnoUiSlidersを1つのページに作成しようとしていますが、「noUiSlider.createには1つの要素が必要です」というエラーが表示されます。

基本的に、私は異なる機能から2つ（またはそれ以上）のスライダ（異なるクラス）をインスタンス化していますが、上記のエラーが発生しています。

このプラグインを使用したことがある人はいますか？

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')を使用してください。は単一の要素を返します。