たかがスライダー、されどスライダー。

[追記:IE対応しました]

RANT

スライダーって便利ですよね。

スマートフォンやタブレットなどのタッチデバイスだとなおのこと。

HTML5では、<input type="range">だけで出来てしまいます。こんな風に。

50/100

モダンなPCブラウザーならすでにサポートしてたりします。

ところがこれ、まだiOSもAndroidも現状未サポートなのですよorz。FireFoxも。iOSは5で対応しましたが。

というわけで必要最小限で、かつタッチインターフェイスでも動くのを作ってみました。

DEMO

Red、Blue、Greenを、Mac/PCならマウスでドラッグしたり、iOS/Androidなら指でなぞったりしてみて下さい。

iPhoneやAndroidで試してみたい方は、PC版ないし以下を。

スマートフォン版の方はlivedoor blogが本ページを動かないように再加工しちゃうみたいなので。/lite版でも動くようになりました。コメント欄参照。

Red
 
Green
 
Blue
 
RGB
rgb(192,128,64)

CAVEAT

  • ライブラリー使っていないのは、オフラインでも動くようにしたかったというのが一つ。具体的にはこれのページ早送り/巻き戻しとか。
  • ごめんなさい。IEでは動きません。だれかこの子をIE--特にWindows Phoneで動くようにしてやってください
  • IE対応しました。Windows Phone でも動きます! ただWindows Phone だとタッチはOKでもドラッグすると画面ごとうにょうにょ動いちゃいます。抑制手段を知りたい…
  • それ以外の「モダン」ブラウザーでは、Firefox含め気持ちよく動きます。特にタッチデバイス。
  • HTML ElementはDIVタグ二つだけ。最低限文化的。でも何となくMetro UIっぽい。IEで動かないくせに
  • 要諦は、mousedownないしtouchstartで、documentにmove時のイベントハンドラーを追加して、mouseupないしtouchendでそれらを削除してしまうことにあります。これに気が付くのに小一時間…
  • element.getBoundingClientRect()マジ天使

Enjoy!

Dan the Nullingually Trilingual

Source Code: