<input type="range">

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

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

選択された数値を表す文字列を含む DOMStringNumber として値を取得するには 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 は刻みがなく、どの値でも許可されることを意味します (minmax など、他の制約に制限されます)。

メモ: ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が二つあった場合は、正の方向の推奨値に丸められます。

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です。これが望むものでないのであれば、 minmax 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。

例えば、ユーザーに-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
Screenshot of a plain slider control on macOS
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
Screenshot of a plain slider control on macOS
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
Screenshot of a plain slider control on macOS
Live

注意: 現時点で、これらの機能を完全にサポートしたブラウザーはありません。例えば、Firefox はハッシュマークやラベルを全くサポートしておらず、Chrome はハッシュマークはサポートしていますが、ラベルはサポートしていません。Chrome のバージョン 66 (66.0.3359.181) はラベルをサポートしますが、<datalist> タグについて、display プロパティがデフォルトでラベルを隠す none に設定されているため、CSS を使ってスタイルを設定する必要があります。

方向の変更

ブラウザーが範囲入力をスライダーとして描画する場合、デフォルトではノブが左右にスライドするように描画します。サポートされているならば、width の値よりも height の値が大きくなるよう CSS を定義することにより、上下にスライドする垂直のスライダーを作ることができるでしょう。しかし、実際にはこれはどの主要なブラウザーにも実装されていません (Firefox の バグ 981916Chrome bug 341071 を参照)。また、おそらくは、まだ議論中かもしれません。

それまでの間、垂直の範囲を作るには CSS 変換を使うか、特定のブラウザーをターゲットにした固有の方法を使います。後者には、appearance に slider-vertical を設定したり、Firefox で非標準の orient 属性を使ったり、Internet Explorer と Edge 用のテキスト方向の変更を行うことが含まれます。

このような範囲コントロールがあるとします。

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

このコントロールは水平方向です (少なくとも、全てではないですが、ほとんどの主要なブラウザーでは。それ以外では異なるかもしれません)。

標準

仕様によれば、垂直にするには CSS を追加して、幅よりも高さが大きくなるようコントロールの寸法を変更する必要があります。次のように。

CSS

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

HTML

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

結果

ScreenshotLive 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 度回転させます。この結果、範囲入力は最大値が上部に、最小値が下部になるよう回転されています。

ScreenshotLive 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"> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
type="range"Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 23IE 完全対応 10Opera 完全対応 11Safari 完全対応 3.1WebView Android 完全対応 4.4
完全対応 4.4
未対応 2 — 4.4
補足
補足 Pre-Chromium Android WebView recognizes the range type, but doesn't implement a range-specific control.
Chrome Android 完全対応 57Firefox Android 完全対応 52Opera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android 完全対応 7.0
Tick mark supportChrome 完全対応 ありEdge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 841942.
IE ? Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 841942.
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
Vertically-oriented slider supportChrome 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Edge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 840820 and bug 981916.
IE 完全対応 10
補足
完全対応 10
補足
補足 The slider can be oriented vertically by setting the writing-mode: bt-lr style on the input element.
Opera 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Safari 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Chrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 840820 and bug 981916.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Samsung Internet Android 完全対応 あり
補足
完全対応 あり
補足
補足 The slider can be oriented vertically by setting the non-standard -webkit-appearance: slider-vertical style on the input element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報