togatttiのエンジニアメモ

過度な期待はしないでください。旧麹町で働くエンジニアのメモ帳です。

inputタグのrange属性にCSSを加えアレンジしてみた

最近HTML5のinput属性にrangeがあることを知った。
valueに数字を入れてくれたりするし、使い勝手は今後ありそう。

だけど、デフォルトがいけてなさすぎる...

デフォルト↓↓

input type(range) 

触ってみれば分かると思うけど、ドラッグして動かせるだけでどの数字を持っているのか、
分からない。だから、実際に実装する場合にはJavascript,CSSなんかで加工していく必要がある。

せっかくだからその一例を探して、ソースコードを斜め読みして書いてみることにした。

デモ

inputタグにhoverすると、valueが表示され、そのまま動かすと、動的に増減する。

実にシンプル!!

次にコードの説明。

HTML

  • inuput rangeのonchangeを設定して、outputタグのvalueと関連づけている。

outputは初めて知ったけどフォームで入力された値に基づいて計算をして、
その結果を表示するようなときに使うものみたい。

CSS


CSSではポイントとなりそうな箇所を3つに分けてみた〜。

(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リファレンス