inputタグのrange属性にCSSを加えアレンジしてみた
最近HTML5のinput属性にrangeがあることを知った。
valueに数字を入れてくれたりするし、使い勝手は今後ありそう。
だけど、デフォルトがいけてなさすぎる...
デフォルト↓↓
input type(range)
触ってみれば分かると思うけど、ドラッグして動かせるだけでどの数字を持っているのか、
分からない。だから、実際に実装する場合にはJavascript,CSSなんかで加工していく必要がある。
せっかくだからその一例を探して、ソースコードを斜め読みして書いてみることにした。
デモ
inputタグにhoverすると、valueが表示され、そのまま動かすと、動的に増減する。
実にシンプル!!
次にコードの説明。
HTML
- inuput rangeのonchangeを設定して、outputタグのvalueと関連づけている。
outputは初めて知ったけどフォームで入力された値に基づいて計算をして、
その結果を表示するようなときに使うものみたい。
CSS
CSSではポイントとなりそうな箇所を３つに分けてみた〜。
(1)
[input[type="range"]::-webkit-slider-thumb ]
rangeにスタイルを当てるためのおまじないみたいなもの。
(2)
[input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue{}]
rangeがhover,activeされたときに、その兄弟要素であるoutput#rangevalueにCSSを適用する。
opacityは要素の透明度を示し、100は通常表示、0だと非表示になる。
(3)
デフォルト時の#rangevalueにはopacityが0(非表示)を設定してある。
transitionを設定することで、CSSでもアニメーションの設定ができる。
hoverされたときにtransitionが動作して、透明度が0(非表示)から100(表示)
になることで、要素が出現しているように見えるということ。
アニメーションがCSSでも実装できることに驚いた...
ぜひお試しあれ!!
参考：
Range Slider | Range Input Using HTML5 & CSS3 | NO JAVASCRIPTWebs Tutorial
E ~ F （以降の兄弟要素） CSSセレクタの詳細とデモ | ねこだまのCSSリファレンス&デモ
CSS3 アニメーション（Transitions）の使用方法 | CSS Lecture
output - タグ/HTML/属性 : ASCII.jp HTMLリファレンス
