Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

shingorow
葛飾区にあるIT企業の社長。 鯖缶からウェブのコーディングまで必要となればとりあえずやる感じで。 基本的にアホです。
https://www.youtube.com/channel/UC3zbwt8mXq7ZHoarZ3OHKJQ
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした