<input> 要素のrange 型は、指定された値より小さくなく、別に指定された値より大きくない値をユーザーに指定させるために使用します。しかし、厳密な値は重要とはされません。これは通常、number 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。

この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。

試してみましょう

<p>Audio settings:</p><div>  <input type="range" name="volume" min="0" max="11" />  <label for="volume">Volume</label></div><div>  <input    type="range"       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 より小さくはなりません。この既定値は 0 です。
• 値はmax より大きくはなりません。この既定値は 100 です。
• 値はstep の倍数になります。この既定値は 1 です。

値

value 属性は、選択された数値を文字列で格納します。値は空文字列 ("") になることはありません。既定値は指定した最小値と最大値の中間の値です。ただし、最大値が最小値より小さい場合は、min 属性の値が既定値に設定されます。既定値を決定するアルゴリズムは次の通りです。

defaultValue =  rangeElem.max < rangeElem.min    ? rangeElem.min    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。

追加の属性

すべての<input> 型で共通する属性に加え、range 型の入力欄は次の属性にも対応しています。

list

list 属性の値は、同じ文書内にある<datalist> 要素のid です。<datalist> は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち、このtype と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の目盛りの追加を参照してください。

max

この入力欄が受け付ける最大値です。要素に入力されたvalue がこれを超えた場合、要素は制約検証に失敗します。max 属性の値が数値でない場合、要素は最大値を持ちません。

この値はmin 属性の値より大きいか、等しくしなければなりません。HTML のmax 属性を参照してください。

min

許可されている値の範囲の最小値です。要素のvalue がこれより小さい場合、要素は制約検証に失敗します。min 属性の値が数値でない場合、要素は最小値を持ちません。

この値はmax 属性の値以下でなければなりません。 HTML のmin 属性を参照してください。

step

step 属性は値が吸着する粒度を指定する数値です。指定した刻み間隔（min を指定した場合はvalue、それ以外の場合は適切な既定値）に一致する値のみが有効となります。

step 属性には文字列値any を設定することもできます。このstep 値は、刻み間隔を意味せず、指定した範囲内で任意の値が許されることを意味します（他にもmin やmax のような制約がある場合は除きます）。対応しているブラウザーでこのように動作するのかについては、step をany に設定の例を参照してください。

range 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。例えば、min に -10 を、value に 1.5 を設定した場合、step が 1 の場合は正の方向に 1.5, 2.5, 3.5,… など、負の方向に -0.5, -1.5, -2.5,… などのみが許可されます。HTML のstep 属性を参照してください。

標準外の属性

orient

CSS の標準外の -moz-orient non-standard プロパティと同様に<progress> および<meter> 要素に影響を与えるorient 属性は、範囲スライダーの向きを定義する定義します。値はhorizontal が範囲を水平方向に描画することを、vertical が範囲を垂直に描画することを意味します。

例

number 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。range 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。

range 入力欄がよく使用される場合の例をいくつか示します。

• ボリュームやバランス、フィルター制御のようなオーディオの制御。
• カラーチャネル、透過度、明るさなどの色の構成の制御。
• 難易度、視点距離、ワールドサイズなどのゲームの構成の制御。
• パスワードマネージャーが生成するパスワードの長さ。

原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を 0.5 に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。

最小値と最大値の指定

既定では、最小値は 0 で最大値は 100 です。これが望むものでないのであれば、min やmax 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。

例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。

<input type="range" min="-10" max="10" />

値の粒度の設定

既定では、粒度は 1 であり、値は常に整数であることを意味します。粒度は、step 属性を変更することで制御することができます。例えば、 5 から 10 の中間値が必要であれば、step の値を 0.5 に設定してください。

step 属性の設定

<input type="range" min="5" max="10" step="0.5" />

step をany に設定

小数点以下が何桁になろうと、どんな値でも受け入れたい場合は、step 属性にany という値を指定することができます。

HTML

<input type="range" min="0" max="3.14" step="any" /><p>Value: <output></output></p>

JavaScript

const value = document.querySelector("#value");const input = document.querySelector("#pi_input");value.textContent = input.value;input.addEventListener("input", (event) => {  value.textContent = event.target.value;});

結果

この例では、 0 から π までの任意の値を選択することができ、選択された値の小数部は制限されません。JavaScript は、ユーザーが範囲と対話することによって値がどのように変化するかを示すために使用されます。

目盛の追加

範囲コントロールに目盛を追加するには、list 属性を記載して、それにコントロール上の一連の目盛を定義する<datalist> 要素のid を指定します。各点は<option> 要素を使用して表現され、そのvalue には、マークを描画すべき範囲の値が設定されます。

HTML

<label for="temp">快適な温度を選択してください。</label><br /><input type="range" name="temp" list="markers" /><datalist>  <option value="0"></option>  <option value="25"></option>  <option value="50"></option>  <option value="75"></option>  <option value="100"></option></datalist>

結果

同じデータリストを複数の範囲コントロールで使用

コードの重複を防ぐために、同じ<datalist> を複数の<input type="range"> 要素や他の<input> 型に再利用することができます。

HTML

<p>  <label for="temp1">Temperature for room 1:</label>  <input type="range" name="temp1" list="values" /></p><p>  <label for="temp2">Temperature for room 2:</label>  <input type="range" name="temp2" list="values" /></p><p>  <label for="temp3">Temperature for room 3:</label>  <input type="range" name="temp3" list="values" /></p><datalist>  <option value="0" label="0"></option>  <option value="25" label="25"></option>  <option value="50" label="50"></option>  <option value="75" label="75"></option>  <option value="100" label="100"></option></datalist>

結果

ラベルの追加

目盛には<option> 要素にlabel 属性を与えることで、ラベル付けをすることができます。ただし、既定では、ラベルのコンテンツは表示されません。このラベルを表示したり、ラベルを正しい位置に配置するためには CSS を使用してください。以下はその方法の一つです。

HTML

<label for="temp">快適な温度を選択してください。</label><br /><input type="range" name="temp" list="values" /><datalist>  <option value="0" label="とても冷たい"></option>  <option value="25" label="冷たい"></option>  <option value="50" label="ふつう"></option>  <option value="75" label="やや温かい"></option>  <option value="100" label="熱い"></option></datalist>

CSS

datalist {  display: flex;  flex-direction: column;  justify-content: space-between;  writing-mode: vertical-lr;  width: 200px;}option {  padding: 0;}input[type="range"] {  width: 200px;  margin: 0;}

結果

垂直の範囲コントロールの作成

既定では、ブラウザーは範囲入力を、つまみが左右にスライドするスライダーとして描画します。

つまみが上下にスライドする垂直方向の範囲を作成するには、CSS のwriting-mode プロパティをvertical-rl またはvertical-lr に設定してください。

<input type="range" min="0" max="10" value="8" />

input[type="range"] {  writing-mode: vertical-lr;}

これにより、範囲スライダーが垂直に描画されます。

CSS のappearance プロパティを標準外のslider-vertical 値に設定すると、 Chrome と Safari の古いバージョンに対応することもでき、標準外のorient="vertical" 属性を設定すると、 Firefox の古いバージョンに対応することもできます。

例については垂直フォームコントロールの作成をご覧ください。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• HTML フォーム
• <input> およびそれに基づくHTMLInputElement インターフェイス
• <input type="number">
• ValidityState.rangeOverflow およびValidityState.rangeUnderflow
• ConstantSourceNode による複数の引数の制御
• 垂直フォームコントロールの作成
• Styling the range element