HTML / CSS

inputタグの 「range(レンジ)」:値をスライドで変更できる

・デモ

HTML
                  

                  
                
type range
min 最小値
max 最大値
value 初期値の設定
step 値の増減の間隔を指定(デフォルトでは1ずつ変更)

このtypeを使うと、数値の入力範囲を指定したバー形式で調整できる。
主にフォームでの使用や、アプリケーションでの様々な設定調整に活躍します。

例えば、音量調節や画面の明るさの調整、年齢の選択などに使えます。
具体的には、グラデーションの色の透明度や角度を調整する際にも「range」が有効です。

CSSとJavaScriptを組み合わせることで見た目や動作のカスタマイズがが可能

JavaScriptを使って、value値を取得して表示させる

ボタン使ってvalue値を設定することもできる