input type="range"タグ

HTML5

input type="range"は、スライダー入力欄を作成するタグです。

解説

input type="range"を使うと、スライダー入力コントロールを作成できます。

スライダー入力は視覚的に入力した値が分かりやすいため、割合的な意味合いの入力をさせたい場合に便利です。

レンジ入力欄とも呼びます。

カテゴリー (自カテゴリ)	フロー・コンテンツフレージング・コンテンツインタラクティブ・コンテンツ
コンテキスト (親カテゴリ)	フレージング・コンテンツを許可する場所
コンテンツ・モデル (子カテゴリ)	なし

input（type="range"）タグには以下の属性が指定できます。

【属性】
属性	説明
name	名前を指定する（submit時にこの名前で送信される）（例）name="rag01"
value	値を指定する（例）value="75" 　※value値は数値のみ有効です。
min	入力を許可する最小値を指定する（例）min="1" 　※デフォルト値は0です。
max	入力を許可する最大値を指定する（例）max="99" 　※デフォルト値は100です。
step	ステップ値を指定する（例）step="5" 　※ステップ値とは値の刻みです。5だと 5、10、15… が入力可能です。　※デフォルト値は1です。
readonly	読取専用にする（例）readonly="readonly" 　※readonlyのみでもOKです。

その他のグローバル属性値については、グローバル属性をご覧ください。

<input type="range" name="rag01">

初期値は50%の位置です。

<input type="range" name="rag02" min="1" max="99" value="80">

<input type="range" name="rag03" step="10">

値は10単位でのみ移動します。

<input type="range" name="rag04" style="width:300px;">

<form oninput="op.value=rag01.value">
  <input type="range" name="rag05" value="50" />
  <output name="op">50</output>
</form>

スライダーを動かすと値が変化します。