HTML / CSS
inputタグの 「range(レンジ)」:値をスライドで変更できる
HTML
| type | range |
|---|---|
| min | 最小値 |
| max | 最大値 |
| value | 初期値の設定 |
| step | 値の増減の間隔を指定(デフォルトでは1ずつ変更) |
このtypeを使うと、数値の入力範囲を指定したバー形式で調整できる。
主にフォームでの使用や、アプリケーションでの様々な設定調整に活躍します。
例えば、音量調節や画面の明るさの調整、年齢の選択などに使えます。
具体的には、グラデーションの色の透明度や角度を調整する際にも「range」が有効です。
CSSとJavaScriptを組み合わせることで見た目や動作のカスタマイズがが可能
JavaScriptを使って、value値を取得して表示させる
ボタン使ってvalue値を設定することもできる