#はじめに
皆様はrangeのつまみ部分のデザインを変えたいと思ったことはないでしょうか。
知らべてみると、::-webkit-slider-thumbで変更出来ますが、非標準です。しかもこれには擬似要素が付与出来ません。
困った時のstackoverflowで質問してもやはり無理とのこと...。
じゃあ、作るか!
#前提知識
##rangeの見た目はブラウザによって違う
rangeの見た目はブラウザによって違います。
input type=range タグをカスタマイズするために
これは2017年の記事ですが、例えばchromeではデザインが変更されていたりします。
Chrome のフォーム コントロールとフォーカスのアップデート
このため、今後もずっと同じ見た目とは限りません。
##素のままでは変更する量が多い
input type=range タグをカスタマイズするために
この記事を見てもらえればわかりますが、ブラウザによって変更する擬似要素が違います。
つまり、全ブラウザで同じ見た目にする場合は全てリセットしなければなりません。その上、全要素を指定しなければなりません。
#本編
上記を踏まえ、作成していきます。
属性は、min,max,valueをつけます。step?知らんな(すみません実装出来ませんでした)
See the Pen range by 暁の流星 (@nomber1910) on CodePen.
今回はChromeのrangeに似せて作成しました。個人的にほぼ似ていると思います。
###良い点
- つまみが好きにデザイン出来る
- つまみ単体を一つの要素で作成しているので好きにデザインすることが出来ます。
- その他も好きにデザイン出来る
- その他も一つ一つを別の要素で作成しているので好きにデザインすることが出来ます。
- 挙動を自分で変えることが出来る
- 中の挙動は全てJSで作成しているので自分で挙動を変えることが出来ます。
###悪い点・反省点
- ドラッグが出来てしまう
- 今回実装するにあたって、一つ一つをdivで作成したため、つまみをスライドする際にドラッグしてしまい、挙動がおかしくなってしまう時があります。
- stepが実装できなかった
- 段階を踏んでつまみを動かすのが難しかった。こればかりは実力不足。
- スマホ対応していない
- スマホ対応むず～い。
#まとめ
HTMLのタグ作ってる人偉いね。
でも開発が止まってる以上自分で開拓しなければならないジレンマ。
次のバージョンで変更できるようになってるといいな。