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

HTML5

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



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

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


運営しているサイトです。どうぞよろしくお願いします(*´∇｀*)
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト

cooking_bot：料理情報をつぶやくTwitterアカウント