<input type="range">

ユーザーのブラウザーが range 型に対応していない場合は、 text 入力で代替されて扱われます。

利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。

• value が何かに設定されており、妥当な浮動小数点数に変換できない場合、入力が不正な入力になるので検証に失敗します。
• 値は min より小さくはなりません。この既定値は 0 です。
• 値は max より大きくはなりません。この既定値は 100 です。
• 値は step の倍数になります。この既定値は 1 です。

value 属性は、選択された数値を表す文字列が入った DOMString です。値は空文字列 ("") にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は 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 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 any です。刻みの基準値に等しい値（指定されていれば min、そうでなければ value、どちらも設定されていなければ適切な既定値）のみが妥当となります。

文字列値の any は、刻みがなく、どの値でも許可されることを意味します（min や max など、他の制約には制限されます）。

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 の間の値で、小数点以下 2 桁の精度が必要な場合、 step の値を 0.01 に設定します。

step 属性の設定

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

step を "any" に設定

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

<input type="range" min="0" max="3.14" step="any">

この例では、 0 から π までの任意の値を選択することができ、選択された値の小数部は制限されません。

HTML の仕様では、範囲コントロールの表示方法について、ブラウザーにある程度の柔軟性を持たせています。この柔軟性は、目盛りやラベルの分野ほど明確なものはありません。この仕様書では、 list 属性と <datalist> 要素を使って範囲コントロールに独自のポイントを追加する方法を説明していますが、コントロールの長さに沿った標準的なハッシュや目盛マークについての要件や推奨事項はありません。

範囲コントロールのモックアップ

ブラウザーにはこのような柔軟性がありますが、 HTML が定義する範囲コントロールの機能すべてに対応しているものは今のところありません。ここでは、それらに対応しているブラウザーで、 macOS で得られるかもしれないものを示すモックアップをいくつか紹介します。

簡素な範囲コントロール

これは list 属性を指定しない場合や、ブラウザーが対応していない場合に表示されるものです。

HTML	例
<input type="range">	画面ショット
	ライブ

目盛り付きの範囲コントロール

この範囲コントロールは、コントロール上の一連の目盛りを定義する <datalist> の ID を指定する list 属性を使用しています。 11 個の目盛りがあり、 0% と 10% ごとのマークに 1 つずつあります。各ポイントは <option> 要素で表され、その value にはマークが描かれるべき範囲の値が設定されています。

HTML	例
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50"></option> <option value="60"></option> <option value="70"></option> <option value="80"></option> <option value="90"></option> <option value="100"></option> </datalist>	画面ショット
	ライブ

目盛りとラベル付きの範囲コントロール

ラベルを付けたい目盛りに対応する <option> 要素に label 属性を追加することにより、範囲コントロールにラベルを追加することができます。

HTML	例
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50" label="50%"></option> <option value="60"></option> <option value="70"></option> <option value="80"></option> <option value="90"></option> <option value="100" label="100%"></option> </datalist>	画面ショット
	ライブ

既定では、ブラウザーが範囲入力をスライダーとしてレンダリングする場合、つまみが左右にスライドするようにレンダリングされます。対応すれば、 CSS で幅の値より大きい高さの値を宣言することで、範囲を垂直にして上下にスライドさせることができるようになります。これは、実はまだ主要なブラウザーでは実装されていません。（Firefox バグ 981916, Chrome bug 341071 参照）。また、おそらく、まだ議論中であるかもしれません。

一方、CSS 座標変換を使って回転させることで、範囲を垂直にすることができます。また、 appearance を slider-vertical に設定する、Firefox で標準ではない orient 属性を使う、または Internet Explorer と Edge でテキスト方向を変更するなど、それぞれのブラウザエンジンに合わせた方法で、対象を垂直にしていくことが可能です。

水平の範囲コントロール

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

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

Screenshot	Live sample

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

標準ベースの垂直範囲コントロール

仕様によると、縦長にするには、以下のように CSS を追加して、コントロールの寸法を横幅よりも縦幅が大きくなるように変更する必要があるそうです。

#volume {
  height: 150px;
  width: 50px;
}

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

Screenshot	Live sample

残念ながら、現在垂直範囲コントロールに直接対応している主要なブラウザーはありません。

transform の使用

水平方向の範囲コントロールを横に描画することで、垂直方向の範囲コントロールを作成することができます。最も簡単な方法は CSS を使うことです。 transform を適用して要素を回転させることで、縦長にすることができます。それでは見てみましょう。

HTML を更新して <input> を <div> で囲み、座標変換が行われた後にレイアウトを修正できるようにします（座標変換は自動的にはページのレイアウトに影響しないので）。

<div class="slider-wrapper">
  <input type="range" min="0" max="11" value="7" step="1">
</div>

次に、 CSS が必要です。これはページが正しく表示されるように、表示モードとサイズを指定します。要するに、スライダーのためにページの領域を確保し、回転したスライダーが混乱することなく確保したスペースに収まるようにします。

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}

次に、予約されたスペース内にある <input> 要素のスタイル情報です。

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

コントロールの大きさは、縦 150 ピクセル×横 20 ピクセルに設定されています。マージンは 0 に設定され、transform-origin はスライダーが回転する空間の中央に移動します。スライダーは幅 150 ピクセルに設定されているので、各辺が 150 ピクセルであるボックスを回転して通過します。原点を各軸で 75px オフセットすることで、その空間の中心を軸に回転することを意味します。最後に、反時計回りに 90° 回転させます。その結果、最大値が上、最小値が下になるように回転された範囲入力が得られます。

Screenshot	Live sample

appearance プロパティの使用

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

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

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

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

input[type="range"] {
  -webkit-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">

入力型が range のものだけを対象にして、書字方向を既定値から bt-lr、すなわち下から上、左から右に指定することで Edge や Internet Explorer に対応し、 -webkit-appearance: slider-vertical で WebKit ベースのブラウザーに対応します。

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

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