複数のスライダーに対応させる

スライダーが複数ある場合は、単純には次のようにします。

1. 二つ目のスライダーのid名をrange2, 値表示のid名をvalue2などと別の名前にする。
2. スクリプト中のid名もその通り変更して追加する。

追加するスクリプトは、次のようになります。functionに要素を渡しているので、functionの再定義は必要ありません。

<script>
  var elem2 = document.getElementById('range2');
  var target2 = document.getElementById('value2');
  elem2.addEventListener('input', rangeValue(elem2, target2));
</script>

まあ、スライダーが3つくらいまでならやる気が出ますが、それ以上となると面倒になってきます。

複数のスライダーに一つのコードで対応させる

そこで、複数のスライダーに対して、一つのコードブロックで対応させます。

まず、全てのスライダーと値表示の部品を、一つのclassの子要素にします。

<div class="range">
  <input type="range" min="0" max="10" value="5">
  <span>5</span>
</div>

ここでは、rangeというclass名を持たせることにしました。

最後に、次のスクリプトを追加します。

<script>
 　var elem = document.getElementsByClassName('range');
　 var rangeValue = function (elem, target) {
　 　　return function(evt){
　　　 　　target.innerHTML = elem.value;
 　　　}
　 }
　 for(var i = 0, max = elem.length; i < max; i++){
 　　　bar = elem[i].getElementsByTagName('input')[0];
 　　　target = elem[i].getElementsByTagName('span')[0];
　　　 bar.addEventListener('input', rangeValue(bar, target));
　 }
</script>

ここでは、rangeというclass名をもつ子要素の中で、input, span要素を持つ初めの要素をそれぞれ、スライダー、値表示の部品であると仮定しています。

他の要素を使った場合は、適宜書き換えてください。例えば、<input type=”number”>を値表示の部品につかった場合は、(‘span’)[0]の部分を(‘input’)[1]にします。

動作サンプル

それぞれが独立して動作することを確認してください。

動作しましたでしょうか。
スライダーはキーボードを使わずに値を入力できますので、どんどん使ってスライダーだらけにしていきたいですね!!

参考文献

• JavaScriptでコールバック関数にあらかじめ引数を渡したい！

なお、html5などのタグの対応ブラウザを調べたい場合は、次のページが大変便利です。

• Can I use?