<input type="range">

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

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

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

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

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

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

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 属性を参照してください。

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 id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></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" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <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" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <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" id="tempB" name="temp" list="values" />

<datalist id="values">
  <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 の appearance プロパティを slider-vertical に設定し、Firefox の標準外の orient 属性を記載してください。

水平の範囲コントロール

この範囲コントロールを考えてみてください。

<input type="range" id="volume" min="0" max="11" value="7" step="1" />

このコントロールは水平です（少なくとも主要なブラウザーではそうですが、他のブラウザーでは異なるかもしれません）。

appearance プロパティの使用

appearance プロパティには slider-vertical という標準外の値があり、スライダーを縦にします。

これまでの例と同じ HTML を使用します。

<input type="range" min="0" max="11" value="7" step="1" />

range 型の入力だけを対象にします。

input[type="range"] {
  appearance: slider-vertical;
}

orient 属性の使用

Firefox だけですが、標準外の orient プロパティがあります。

前述の例と同様の HTML を使用しますが、この属性に vertical の値を設定します。

<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />

writing-mode: bt-lr

writing-mode プロパティは、一般に国際化やローカライズのためにテキスト方向を変更するために使用するべきではありませんが、特殊効果のために使うことができます。

前述の例と同様の HTML を使用します。

<input type="range" min="0" max="11" value="7" step="1" />

入力型が range のものだけを対象に、書字方向を bt-lr、すなわち下から上へ、右から左へ設定します。

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

すべて一緒に設定

上記の例は動作するブラウザーが異なるため、単一の例が複数のブラウザーで動作するように一緒に指定することができます。

orient 属性に vertical の値を設定することで Firefox に対応します。

<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />

input の type が range で orient が vertical のものだけを対象とし、writing-mode を既定値から bt-lr （下から上、左から右）に変更し、Blink と Webkit のブラウザーに対応している appearance: slider-vertical を追加します。

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

• HTML フォーム
• <input> およびそれに基づく HTMLInputElement インターフェイス
• <input type="number">
• validityState.rangeOverflow および validityState.rangeUnderflow
• ConstantSourceNode による複数の引数の制御
• Styling the range element
• CSS プロパティの互換性