<input type="range">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、自動大文字化と自動修正継承、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 無し（空要素） |
input要素に type="range" を指定すると、大まかな数値の入力欄を作成できます。
<input type="range" name="example1">
<input type="range" name="example2" value="0">
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性（共通） | |||
type="" |
部品のタイプ | range |
大まかな数値の入力欄 |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
value="" |
送信される値 | 数値 | 入力欄の初期値（浮動小数点数） |
disabled |
部品の無効化 | （disabled） |
値は省略可能 |
form="" |
フォームとの関連付け | ID名 | 関連付けるform要素に指定したID名 |
| 任意属性（部品タイプに依存） | |||
min="" |
入力できる数値の最小値 | 数値 | 最小値（浮動小数点数、既定値は 0） |
max="" |
入力できる数値の最大値 | 数値 | 最大値（浮動小数点数、既定値は 100） |
step="" |
入力できる数値のステップ | 数値 | この値の間隔で入力を可能にする（既定値は 1） |
any |
ステップを設定しない |
autocomplete="" |
オートコンプリート | on |
オートコンプリートを有効にする |
off |
オートコンプリートを無効にする | ||
| 詳細トークン | （詳しくは仕様書をご覧ください） | ||
list="" |
入力候補のリスト | ID名 | 関連付けるdatalist要素に指定したID名 |
- 各属性の概要は、上記表のリンク先をご覧ください。（input要素のページにリンクしています）
どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。
この部品タイプの特徴
大まかな数値を入力するための入力欄です。
（実際の表示例）
この部品タイプに対応しているブラウザでは、スライダーバーを使って数値を入力することができます。
数値の書式
入力する数値、およびvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。
- 浮動小数点数
7、-7、0.7、0.7E-2
- 負数の数値も入力することができます。（マイナス（
-）を付けます） - 小数点以下の数値も入力することができます。（ピリオド（
.）に続けて記述します） - 指数表記も使えます。（
Eまたはeを付けます）
<input type="range" name="example" value="0">
小数点以下の入力を求める場合は、step属性の値に 0.1 などを指定しておきます。（既定値が 1 なので）
<input type="range" name="example" step="0.1" max="1">
スライダーのデフォルトの位置
min属性値よりmax属性値の方が大きい場合は、スライダーのデフォルトの位置は中間になります。
- そうでない場合（max属性値の方が小さい場合）は、スライダーの位置はmin属性値の位置になります。
次の例では、25の位置がデフォルトの位置となります。
<input type="range" name="example" min="0" max="50">
min属性値の位置をデフォルトにしたい場合は、min属性と同じ値をvalue属性に指定しておきます。
<input type="range" name="example" min="0" max="50" value="0">
min属性とmax属性について
min属性とmax属性は、入力できる数値の範囲を指定します。（どちらかのみを指定することも可能です）
- min属性 … 入力できる数値の最小値を指定します。（既定値は
0） - max属性 … 入力できる数値の最大値を指定します。（既定値は
100）
次の例では、-50 ～ 50 の範囲で入力が可能となります。
<input type="range" name="example" min="-50" max="50">
step属性について
step属性は、入力できる数値のステップ（入力値の間隔）を指定します。type="range" の場合は 1 が既定値となります。
次の例では 10 を指定しているので、10間隔で入力できることになります。（例：10、20、30 ...）
<input type="range" name="example" step="10">
小数点以下の入力を可能にする場合は、次のように 0.1 などを指定します。
<input type="range" name="example" step="0.1">
値に any を指定すると、ステップは設定されません。
<input type="range" name="example" step="any">
スライダーバーの目盛りについて
list属性とdatalist要素によって入力候補を設定しておくと、スライダーバーの入力候補の位置に目盛りが表示されます。
次の例では、10、20、30の位置に目盛りが表示されます。
<input type="range" name="example" list="data1">
<datalist id="data1">
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
</datalist>
（実際の表示例）
- ChromeやEdgeでは表示されますが、Firefoxでは表示されないようです。
使用例
- 以下のサンプルでは、動作確認のため送信先としてHTMLファイル（現在のページ）を指定しています。
- 送信後のアドレスバーにて、入力された数値を確認することができます。（example=50 のような感じで表示されます）
<form method="get" action="input_range.html">
<p><input type="range" name="example" min="-50" max="50"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
- 対応しているブラウザでは、スライダーバーの端から端までが
-50～50になります。
<form method="get" action="input_range.html">
<p>デフォルト（1）：<input type="range" name="example1"></p>
<p>10を指定：<input type="range" name="example2" step="10"></p>
<p>50を指定：<input type="range" name="example3" step="50"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
- スライダーバーを操作すると、指定した間隔でスライダーが動きます（対応しているブラウザのみ）。
<form method="get" action="input_range.html">
<p>デフォルト：<input type="range" name="example4"></p>
<p>最小値の位置：<input type="range" name="example5" value="0"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
<form method="get" action="input_range.html">
<p><input type="range" name="example6" list="test"></p>
<datalist id="test">
<option value="0"></option>
<option value="20"></option>
<option value="40"></option>
<option value="60"></option>
<option value="80"></option>
<option value="100"></option>
</datalist>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
- ChromeやEdgeでは、入力候補の位置に目盛りが表示されます。