<input type="range">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容

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名
autofocus [+]自動フォーカスの指定 autofocus 値は省略可能、1つの文書に1つだけ指定可能
任意属性
min="" [+]入力できる数値の最小値 数値 最小値 (浮動小数点数、初期値は 0
max="" [+]入力できる数値の最大値 数値 最大値 (浮動小数点数、初期値は 100
step="" [+]入力できる数値のステップ 数値 この値の間隔で入力を可能にする (初期値は 1
any ステップを設定しない
autocomplete="" [+]オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
list="" [+]入力候補のリスト ID名 関連付けるdatalist要素に指定したID名
  • min属性の値が整数の場合は、step属性に指定できる値も整数のみとなるようです。

type属性name属性value属性disabled属性form属性autofocus属性の詳細については、input要素のページを参考にしてください。

このタイプの特徴

大まかな数値を入力するための入力欄です。

(実際の表示例)

このタイプに対応しているブラウザでは、スライダーバーを使って数値を入力することができます。

数値の書式

入力する数値、及びvalue属性min属性max属性の値は、次の書式で記述する必要があります。

浮動小数点数
7-70.70.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属性値の方が大きい場合は、スライダーのデフォルトの位置は中間になります。

  • そうでない場合は、スライダーの位置は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

次の例では、-5050の範囲で入力が可能となります。

<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">

autocomplete属性について

autocomplete属性は、オートコンプリート機能(入力内容の自動補完)を使うかどうかを指定します。

値には on(使う)または off(使わない)を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。(form要素にも指定されていない場合は on の状態がデフォルトとなります)

<input type="range" name="example" autocomplete="off">
  • HTML 5.1では、input要素のautocomplete属性に on / off 以外の値も指定できるようになりました(詳しくは仕様書をご覧ください)。これにより、きめ細やかな設定が行えるようになります。

list属性について

list属性は、入力候補リストの表示を指定します。この属性を使用する場合は、datalist要素で入力候補のリストを作成しておく必要があります。

値には、datalist要素に指定したID名を記述します。(datalist要素は、form要素の外に配置することも可能です)

<input type="range" name="example" list="data1">

<datalist id="data1">
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
</datalist>
  • IE(11)、Chrome(55)、Opera(12)では、入力候補の位置に目盛りが表示されます。

使用例

min属性とmax属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<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>

表示例

  • 対応しているブラウザでは、スライダーバーの端から端までが -5050 になります。
step属性を指定した例

<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>

表示例

デフォルト(1):

10を指定:

50を指定:

  • スライダーバーを操作すると、指定した間隔でスライダーが動きます(対応しているブラウザのみ)。
スライダーのデフォルトの位置を変更した例

<p>デフォルト:<input type="range" name="example4"></p>

<p>最小値の位置:<input type="range" name="example5" value="0"></p>

表示例

デフォルト:

最小値の位置: