<input>
要素の range
型は、ユーザーに一定の値より小さくなく、別な一定の値より大きくない数値を指定させるために使用します。しかし、厳密な値は重要であるとはされません。これは通常、 number 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。この種のウィジェットは厳密なものではないので、コントロールの厳密な値が重要でないというのでない限り、通常は使用するべきではありません。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
ユーザーのブラウザーが range
型に対応していない場合は、 text
入力で代替されて扱われます。
値 | 選択された数値を表す文字列を含む DOMString 。 Number として値を取得するには valueAsNumber を使用する。 |
イベント | change および input |
対応している共通属性 | autocomplete , list , max , min , step |
IDL 属性 | list , value , valueAsNumber |
メソッド | stepDown() および stepUp() |
検証
パターン検証は使えませんが、次のような検証が自動的に行われます。
- もし
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 |
max |
許可されている最大値 |
min |
許可されている最小値 |
step |
ユーザーインターフェイスと検証の両方で使用される刻み値 |
オプションの表示がサポートされたブラウザーでどのように行われるかは、下の ハッシュマーク付きの範囲コントロール を参照してください。
max
許可されている値の範囲の最大値です。要素に入力された value
がこれを超えた場合、要素は制約の検証に失敗します。 max
属性の値が数値でない場合、要素は最大値を持ちません。
この値は min
属性の値より大きいか、等しくしなければなりません。
min
許可されている値の範囲の最小値です。要素の value
がこれより小さい場合、要素は制約の検証に失敗します。 min
属性の値が数値でない場合、要素は最小値を持ちません。
この値は max
属性の値より小さいか、等しくしなければなりません。
step
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,... などのみが許可されます。
非標準の属性
属性 | 説明 |
---|---|
orient |
範囲スライダーの方向を設定する。Firefox のみ。 |
orient
<progress>
や<meter>
に影響する -moz-orient 非標準 CSS プロパティと同じように、orient
属性は範囲スライダーの方向を定義します。設定可能な値には、水平方向に描画されることを意味するhorizontal
と、垂直方向に描画されることを意味するvertical
があります。
注意: 次の input 要素の属性は range 型には適用されません: accept
, alt
, checked
, dirname
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height, maxlength
, minlength
, multiple
, pattern
, placeholder
, readonly
, required
, size
, src
, および width
。これらの属性は、例え設定されていたとしても、無視されます。
使用例
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 に設定します。
<input type="range" min="5" max="10" step="0.01">
もし、小数点以下の桁数に関係なく値を入力させたい場合は、step
属性の値に any
を指定します。
<input type="range" min="0" max="3.14" step="any">
この例は、値の小数部分に制限なく、0 から π までの間からユーザーに任意の値を選択させます。
ハッシュマークとラベルの追加
HTML 仕様により、ブラウザーは範囲コントロールをいくらか柔軟に表示できるようになります。これが明確にわかるのは、ハッシュマークと、その次点でラベルをおいて他にないでしょう。この仕様には、list
属性と <datalist>
要素を使って範囲コントロールにカスタムの点を追加できると書かれています。しかし、コントロールの長さに沿ったハッシュや目盛りの標準については、要件どころか推奨すらありません。
範囲コントロールのモックアップ
ブラウザーにはこの柔軟性があるものの、現時点で HTML の定義する範囲コントロールの機能は完全にはサポートされていないため、macOS のこれらをサポートするブラウザー上でどのように表示されるか、モックアップを用意しました。
簡素な範囲コントロール
以下は、list
属性を指定しない場合、またはそれらをサポートしないブラウザーの場合の表示です。
HTML | Examples |
---|---|
<input type="range"> |
Screenshot |
![]() |
|
Live | |
ハッシュマーク付きの範囲コントロール
この範囲コントロールは list
属性を使っており、それにはコントロール上に配置されるハッシュマークの定義である <datalist>
の ID が指定されています。ハッシュマークは 11 個あり、0% にひとつ、10% ごとにひとつずつあります。それぞれの点は<option>
要素で表現されており、その点が描画されるべき位置の値が設定された value
を持っています。
HTML | Examples |
---|---|
<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> |
Screeshot |
![]() |
|
Live | |
ハッシュマークとラベル付きの範囲コントロール
範囲コントロールにラベルを追加するには、ラベルを表示したい目盛りの <option>
要素に、 label
属性を追加します。
HTML | Examples |
---|---|
<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> |
Screeshot |
![]() |
|
Live | |
注意: 現時点で、これらの機能を完全にサポートしたブラウザーはありません。例えば、Firefox はハッシュマークやラベルを全くサポートしておらず、Chrome はハッシュマークはサポートしていますが、ラベルはサポートしていません。Chrome のバージョン 66 (66.0.3359.181) はラベルをサポートしますが、<datalist>
タグについて、display
プロパティがデフォルトでラベルを隠す none
に設定されているため、CSS を使ってスタイルを設定する必要があります。
方向の変更
ブラウザーが範囲入力をスライダーとして描画する場合、デフォルトではノブが左右にスライドするように描画します。サポートされているならば、width の値よりも height の値が大きくなるよう 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 を追加して、幅よりも高さが大きくなるようコントロールの寸法を変更する必要があります。次のように。
CSS
#volume { height: 150px; width: 50px; }
HTML
<input type="range" id="volume" min="0" max="11" value="7" step="1">
結果
Screenshot | Live sample |
---|---|
![]() |
残念なことに、この方法で範囲コントロールを垂直にすることは現時点で主要なブラウザーにサポートされていません。
transform: rotate(-90deg)
しかし、水平方向の範囲コントロールを垂直方向に描画することで、垂直方向の範囲コントロールを作ることができます。最も簡単なのは CSS を使うことです。要素を回転させるために transform
を適用させると、垂直にできます。試してみましょう。
HTML
<input>
を内包するような wrapper の <div>
を HTML に追加します。これは、CSS 変換の後にレイアウトを修正するために使います (CSS 変換は、ページ上のレイアウトを自動的に変更するわけではありません)。
<div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div>
CSS
次にいくつか CSS を設定します。まず wrapper 用の 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); }
コントロールのサイズは、幅 150px、高さ 20px に設定します。マージンは 0 にし、transform-origin
をスライダーが回転する領域の中心部分にずらします。スライダーは幅が 150 px に設定されているため、縦横 150px の四角形を通るように回転します。どちらの軸からも 75px の位置を原点にすることは、その領域の中央を中心に回転することを意味します。最後に、反時計回りに 90 度回転させます。この結果、範囲入力は最大値が上部に、最小値が下部になるよう回転されています。
Screenshot | Live sample |
---|---|
![]() |
appearance プロパティ
appearance
プロパティは、非標準の値 slider-vertical
を設定することができ、それによりスライダーを垂直にすることができます。
HTML
以前の例と同じ HTML を使います。
<input type="range" min="0" max="11" value="7" step="1">
CSS
range 型の input だけを対象にします。
input[type="range"] { -webkit-appearance: slider-vertical; }
orient 属性
Firefox のみ、非標準の orient
プロパティを使えます。
HTML
以前の例と似た HTML を使いますが、vertical
という値を持つ属性を追加します。
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
writing-mode: bt-lr;
writing-mode
プロパティは、国際化やローカライズ目的でテキストの方向を変更するために通常使うべきではありませんが、特別な効果のために使うことができます。
HTML
以前の例と同じ HTML を使います。
<input type="range" min="0" max="11" value="7" step="1">
CSS
range 型の input だけを対象にして、writing-mode をデフォルトから bt-lr
に、つまり下から上、左から右に変更します。
input[type="range"] { writing-mode: bt-lr; }
全て一つにする
これまでの例はそれぞれ異なるブラウザーで動作するので、これらを全て一つにすることで、ブラウザー横断的に動作する例を作ることができます。
HTML
Firefox 用に、orient
属性を vertical
にします。
<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
CSS
range 型の input だけを対象にして、Edge と Internet Explorer 用に、writing-mode を デフォルトから bt-lr
に変更し、全ての Webkit 基盤のブラウザー用に、-webkit-appearance: slider-vertical
を追加します。
input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <input type="range"> の定義 |
現行の標準 | 初回定義 |
HTML 5.1 <input type="range"> の定義 |
勧告 | 初回定義 |
ブラウザーの対応
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
type="range" | Chrome 完全対応 4 | Edge 完全対応 12 | Firefox 完全対応 23 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 3.1 | WebView Android
完全対応
4.4
| Chrome Android 完全対応 57 | Firefox Android 完全対応 52 | Opera Android 完全対応 あり | Safari iOS 完全対応 5.1 | Samsung Internet Android 完全対応 7.0 |
Tick mark support | Chrome 完全対応 あり | Edge ? | Firefox
未対応
なし
| IE ? | Opera 完全対応 あり | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
未対応
なし
| Opera Android 完全対応 あり | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
Vertically-oriented slider support | Chrome
完全対応
あり
| Edge ? | Firefox
未対応
なし
| IE
完全対応
10
| Opera
完全対応
あり
| Safari
完全対応
あり
| WebView Android
完全対応
あり
| Chrome Android
完全対応
あり
| Firefox Android
未対応
なし
| Opera Android
完全対応
あり
| Safari iOS
完全対応
あり
| Samsung Internet Android
完全対応
あり
|
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実装ノートを参照してください。
- 実装ノートを参照してください。