[HTML5] 新しいインターフェース、スライダーを試してみた

今日は、HTML5から新しく追加されたinput要素のスライダーを試してみたので、ブログに記載したいと思います。

HTML5から追加されたスライダーを利用したインターフェース

今迄のHTMLでもラジオボタンやチェックボックスなど、様々なUIが提供されていました。しかし、デスクトップアプリケーションやiPhoneに搭載されたスライダー要素はありませんでした。スライダーは、指定された範囲から値を選択する際に、ユーザーがより簡単に値を選択する事のできるUIではないかと思います。これが使えるようになるとちょっと便利になるかも。

（スライダーの例 - HTML5対応ブラウザ限定）

http://www.yoheim.net/labo/webparts/slider.php

スライダーの使い方

スライダーは、inputタグで作成出来ます。「type="range"」と指定する事で、スライダーのUIを作成出来ます。簡単(*´∇｀*)

<input id="range01" type="range"/>

値の範囲を指定する

値の範囲を指定するには、min属性とmax属性を指定します。

<input id="range01" type="range" min="0" max="100"/>

値の増加数を指定する

値を2こずつ増加した値で指定したいなど、増加率を指定したい場合には、step属性を指定します。

<input id="range01" type="range" min="0" max="100" step="2"/>

スライダーの値の変化を取得する

スライダーの値に合わせて文字サイズを変化させたい場合など、スライダーの値変化を察知したい場合には、changeイベントを利用します。

<input id="range01" type="range" min="0" max="100" step="2" onchange="showValue()"/>
<span id="showRangeArea">0</span>
 <script type="text/javascript">
  function showValue () {
     document.getElementById("showRangeArea").innerHTML 
      = document.getElementById("range01").value;
  }
</script>  

最後に

とりあえず、SafariとChromeでは動きました。Firefoxでは動きませんでした。残念。動作しないブラウザもあるようですが、まあ便利そうなインターフェースだなぁと言う感想です。様々なブラウザーでスライダーを実現するなら、jQueryUIのスライダーを利用するなど、工夫が必要そうです。