レンジ入力欄(スライダー)の現在値を表示する方法

HTML5でサポートされたレンジ入力欄(スライダー)は、そのままではユーザーが現在値を知ることができません。ユーザーのスライダー操作を感知して、現在値を表示する方法を紹介します。javascriptを使用します。複数のスライダーにも一つのコードで対応します。

デフォルトの状態

HTML5では、次のようなレンジ入力欄がサポートされました。大まかな数値を入力することが出来ます。

<input type="range" id="range" min="0" max="10" step="1" value="5">

type=”range”を指定すると表示されます。minが最小値、maxが最大値、stepがステップ、valueが初期値です。

しかし、このままではユーザーはスライダー操作中に現在の値を知ることが出来ません。入力がだいたいの値でよいのであれば、このままでも用をなすのでしょうが、しかしなんとなくユーザーを不安にさせます。

そのため、現在値を表示するようにJavascriptを書いてみます。

数値を表示するスペースを用意

まずは、隣に数値を表示するスペースを作ります。

<input type="range" id="range" min="0" max="10" step="1" value="5">
 <span id="value">5</span>

5

<span>で適当に追加しています。一意のid名をつけられれば、ここのタグは<div>でも<input type=”number”>でもなんでもよいです。

ここではスライダーに、”range”、数値表示欄に”value”というid名をつけました。

ユーザー操作を捕捉して値を書き換え

次に、ユーザー操作を感知して、数値を書き換える Javascript を追加します。

<script>
  var elem = document.getElementById('range');
  var target = document.getElementById('value');
  var rangeValue = function (elem, target) {
    return function(evt){
      target.innerHTML = elem.value;
    }
  }
  elem.addEventListener('input', rangeValue(elem, target));
</script>

なお、inputタグに onchange=”function()”を追加する方法もあります。その方が実装は楽ですが、しかしドラッグ中は数値表示が変化しません。ユーザーが値の微調整をすることができなくなりますので、お勧めしません。

targetが<span>の場合は、target.innerHTMLを書き換えますが、<input>の場合はtarget.valueを書き換えるように適宜変更してください。

動作サンプル

ドラッグ中も値が変化することを確認してください。

5

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

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

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?