range

input要素のtype属性にrangeを指定すると、レンジ入力欄になる。

ブラウザ対応

構文

<input type="range">

属性

属性 説明
autocomplete属性 オートコンプリートを有効にするかどうかを指定する属性。
autofocus属性 オートフォーカスさせる属性。
disabled属性 無効にする属性。
form属性 属するform要素のid属性値を指定する属性。
list属性 入力候補を示すdatalist要素（データリスト）のid属性値を指定する属性。
max属性 最大値を指定する属性。レンジ入力欄においては、指定した数値より大きい数値は入力できなくなる。レンジ入力欄における初期設定値は100。
min属性 最小値を指定する属性。レンジ入力欄においては、指定した数値より小さい数値は入力できなくなる。レンジ入力欄における初期設定値は0。
name属性 名前を指定する属性。
step属性 入力可能な数値の間隔を指定する属性。レンジ入力欄においては、入力可能な数値の間隔となる。レンジ入力欄における初期設定値は1。
value属性 値を指定する属性。レンジ入力欄においては、初期入力値となる。

サンプルコード

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

最大値は「100」、最小値は「0」のレンジ入力欄となる。

最大値と最小値を指定

<input type="range" min="-10" max="10" name="sampleName">

入力可能な数値の間隔を指定

<input type="range" step="5" name="sampleName">

初期入力値を指定

<input type="range" value="5" name="sampleName">

サンプル

シンプルなレンジ入力欄

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			レンジ入力欄：
			<input type="range" name="sampleName">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

レンジ入力欄の範囲を指定

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			レンジ入力欄：
			<input type="range" name="sampleName" value="0" min="-10" max="10">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

数値の間隔を指定したレンジ入力欄

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			レンジ入力欄：
			<input type="range" name="sampleName" value="50" step="5">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示