noUiSlider を複数箇所で使うためのメモ

noUiSlider を複数の場所で使い、それぞれのスライダーの値を input タグの value 属性などに反映させる方法です。

上の画像のように複数の Slider を設置して、それぞれの値を input タグなどに反映させる方法、公式には記載がありませんでした。

サンプルの一部に複数のスライダーを扱っているものがあるのですが、それぞれのスライダーや値を入れる要素に別の ID を付与して処理しているのがちょっと面倒だなと思いました。

やるなら class で DOM をとって処理したいということでやってみました。

window.onload = function() {
  var sliders = document.getElementsByClassName('slider');

  for (var i = 0; i < sliders.length; i++) {
    var slider = sliders[i];
    var options = {
      range: {
        min: [0, 10],
        max: [100]
      },
      start: [20, 80],
    }
    noUiSlider.create(slider, options);
    slider.noUiSlider.on('update', function(values, handle) {

      var parentNode = this.target.parentNode; // this.target で update した slider を取得できる

      parentNode.getElementsByClassName('first')[0].value = values[0];
      parentNode.getElementsByClassName('second')[0].value = values[1];
    });
  }
}

noUiSlider にイベントリスナーを登録し、そのコールバック関数の中の this.target で操作したスライダーを取得します。

あとは親要素を取得して、その子要素から値を入力したい class を指定して値を設定するだけです。

JavaScript の event.target を取得しているだけではあるんですが、こういう例もドキュメントに載せておいてほしいなと思ったりします。