たかがスライダー、されどスライダー。
[追記: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
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
というわけで遅まきながら対応しました。ありがとうございます。
# その頃にはiOS5も <input type="range"> に対応してたり
Dan the livedoor Blogger