こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。
基本のスライダー
スライダーは簡単にいえば動きの制限されたドラッグです。
今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。
今回は少々手抜きで、input type="button"な要素をスライダーのつまみ替わりにします。また、つまみの兄弟要素の空divは背景の線を描くために使用します。
そして、CSSは次のとおりです。やはり、ドラッグする要素のpositionをabsoluteにして、その親要素をposition:relativeにしています。背景の線用のdivにfont-size:0px;という指定があります。IE 6はフォントサイズより要素のサイズを小さくできない(テキストを含まない空の要素であっても)というバグがあるので、その対策です。
さて、スライダーを実現するJavaScriptです。
主な処理はドラッグのときとほとんど変わりません。マウスダウンでドラッグを開始し、アップでドラッグ停止、移動中はスライダーとマウスの位置関係からスライダーの値を決めています。
HTML5のスライダーとの統合
さて、スライダーを汎用的にするに当たって、HTML5で新たにフォームのinput要素のタイプとして追加されたrangeについて触れておきましょう。
HTML5の<input type="range">は前述のようなスライダーをネイティブに提供してくれます。type=rangeはOperaやChromeやSafariなどで既に実装されています。
(range対応ブラウザではスライダーが表示されます)
今回はこのtype="range"になるべく合わせるように実装してみます(ただし、この記事ではtype=rangeが持っているstepや、stepDown()、stepUp()などのメソッドはサポートしませんし、横へのスライド限定です。是非、それらに挑戦してみてください)。
いくつかポイントがありますが、まず、!('step' in _input) でrangeをサポートしているか簡易チェックしています。rangeをサポートしているブラウザではそのままrangeを使うようにします。そのため、ChromeやSafariではネイティブのスライダーが表示されていると思います。
また、IEは一度作ったinput要素のtypeをあとからhiddenにすることができません。document.createElement('<input type="hidden">') のようにして最初からhiddenな要素として作る必要があります(ちなみに、createElementにタグ名でなくタグ全体を書くのもIEの独自拡張です)。
まとめ
今回はJavaScriptを使ったUIとしてスライダーパーツの実装方法を紹介しました。こちらもまだまだ改良の余地があるので、是非自分なり(もしくはHTML5の仕様にそって)に改良してみてください。
次回も引き続きJavaScriptを使ったクロスブラウザなUIの実装を見ていきたいと思います。