Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

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

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

複数の noUiSlider

上の画像のように複数の 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 を取得しているだけではあるんですが、こういう例もドキュメントに載せておいてほしいなと思ったりします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?