年末にアドベントカレンダーで こちらの記事 を執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。
以前から、トグルボタンとか、
ドロワーメニューとか、
つくってはいたのですが、今回はスライダーUIに挑戦しました。
実際にイベントを張るためにはEventDispatcherなどをつかう必要がありますが、今回は省略しています。
また、touch操作にも対応していないので、PCでご観覧ください。
基本方針
1. data属性で取っ手の位置を変更する
<div class="slider center" data-value="50" data-color="blue"> <div class="bar"></div> <div class="knob"></div> </div>
自画自賛になりますが、なかなか面白い方法を取ったと自負しています。
（詳しく調べてないのでもしかしたら車輪の再発明なのかもしれません）
JSからは値をdata-valueに入れるだけでOKで、あとはCSSがうまいこと位置を合わせてくれるという作戦です。
ロジックをJavaScriptに、見た目をCSSに持たせることができ、かなりスッキリコーディングできました。
2. 見た目と当たり判定を分ける
見た目に依存せずにユーザビリティーを確保するために、
当たり判定の大きさを一定にしています。
（これをやらないとマテリアルデザインの方は操作がかなり難しくなる）
取っ手の部分は 60px × 60pxを確保、スライダー本体（クリックしたところにジャンプする機能）は44pxの高さを確保しました。
※ 黒い半透明のところが当たり判定（重なっている部分は取っ手優先）
