<input type="range">
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
* Some parts of this feature may have varying levels of support.
<input> 要素の range 型は、指定された値より小さくなく、別に指定された値より大きくない値をユーザーに指定させるために使用します。しかし、厳密な値は重要とはされません。これは通常、 number 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。
この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。
試してみましょう
<p>Audio settings:</p>
<div>
<input type="range" id="volume" name="volume" min="0" max="11" />
<label for="volume">Volume</label>
</div>
<div>
<input
type="range"
id="cowbell"
name="cowbell"
min="0"
max="100"
value="90"
step="10" />
<label for="cowbell">Cowbell</label>
</div>
p,
label {
font:
1rem "Fira Sans",
sans-serif;
}
input {
margin: 0.4rem;
}
ユーザーのブラウザーが range 型に対応していない場合は、 text 入力で代替されて扱われます。
検証
利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。
値
value 属性は、選択された数値を文字列で格納します。値は空文字列 ("") になることはありません。既定値は指定した最小値と最大値の中間の値です。ただし、最大値が最小値より小さい場合は、min 属性の値が既定値に設定されます。既定値を決定するアルゴリズムは次の通りです。
defaultValue =
rangeElem.max < rangeElem.min
? rangeElem.min
: rangeElem.min + (rangeElem.max - rangeElem.min) / 2;
最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。
追加の属性
すべての <input> 型で共通する属性に加え、 range 型の入力欄は次の属性にも対応しています。
メモ:
range 型の入力欄に適用できない入力属性は、 accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src です。これらの属性が指定されても、無視されます。
list
list 属性の値は、同じ文書内にある <datalist> 要素の id です。 <datalist> は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち、この type と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。
対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の目盛りの追加を参照してください。
max
この入力欄が受け付ける最大値です。要素に入力された value がこれを超えた場合、要素は制約検証に失敗します。 max 属性の値が数値でない場合、要素は最大値を持ちません。
この値は min 属性の値より大きいか、等しくしなければなりません。HTML の