【HTML Living Standard】range属性値の使い方
range属性値の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
rangeプロパティは、HTMLの<input>要素のtype属性に指定された際に、スライダー形式のユーザーインターフェース（UI）部品としての特性を保持するプロパティです。このプロパティを設定することで、ウェブページ上にスライダーが表示され、ユーザーは特定の数値範囲内で直感的に値を選択できるようになります。
具体的には、type="range"と記述された<input>要素は、横方向または縦方向（CSSによる）に動かせるツマミを持つバーとして描画されます。ユーザーがツマミをドラッグすることで、選択された数値が要素のvalue属性に反映されます。
このrangeプロパティは、以下の補助的な属性と組み合わせて使用されることで、その機能が強化されます。
min属性：選択可能な最小値を定義します。max属性：選択可能な最大値を定義します。step属性：ツマミを動かした際の増分値（または減分値）を定義します。この値を設定することで、選択できる値が特定の単位に制限されます。value属性：スライダーの初期値、または現在の選択値を保持します。
これらの属性を適切に設定することで、音量調整、色の選択、数量指定など、連続的な数値入力が必要な場面で、視覚的かつ操作性に優れた入力コントロールを提供します。また、JavaScriptと組み合わせることで、スライダーの値の変更に応じて動的な処理を実行したり、現在の値を取得したりすることも可能です。rangeプロパティは、ユーザーが入力する数値の範囲が広く、おおよその値を選択したい場合に特に有効な入力形式です。
公式リファレンス: <input type="range">
構文(syntax)
1<input type="range" min="0" max="100" value="50" step="1">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません