スライダー入力を試してみた

最近、HTML5から追加されたレンジ入力というものを発見したので簡単に使い方をまとめておきます。

<input type="range" min ="10"max="50" step="1">

inputのタイプをrangeに変更するだけです。
基本のプロパティはmin,max,stepの３つ覚えておけば大丈夫です。

min :最低値
max :最大値
step :刻むステップ値

では簡単に使ってみます。

これはReactで作った場合です。

次にVueで作ってみます。

今回初めてcodesanboxを使ってみました。
こっちのほうが動きがわかるので、できるならば毎回この方式でいきます。