HTML5 inputのrange属性

HTML5のinputタグ、range属性を触る機会があったのでメモ

素の状態

See the Pen input range type by tamoriinu (@yokoyama) on CodePen.

CSSデザインを当てたもの

See the Pen input range type by tamoriinu (@yokoyama) on CodePen.

参考: How To Create Range Sliders

Vue.jsを使ってSVG画像と同期

See the Pen input range type with vue.js by tamoriinu (@yokoyama) on CodePen.

参考: 基礎から学ぶ Vue.js