この記事は翻訳作業中です。

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

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

選択された数値を表す文字列を含む DOMStringNumber として値を取得するには valueAsNumber を使用する。
イベント change および input
対応している共通属性 autocomplete, list, max, min, step
IDL 属性 list, value, valueAsNumber
メソッド stepDown() および stepUp()

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

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

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

追加の属性

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

属性 説明
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,... などのみが許可されます。

range 入力欄の使用

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

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

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

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

最小値と最大値の指定

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

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

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

値の精度の設定

By default, the granularity, is 1, meaning that the value is always an integer. You can change the step attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01:

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

If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any for the step attribute:

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

This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.

ハッシュマークとラベルの追加

The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.

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

Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.

簡素な範囲コントロール

This is what you get if you don't specify a list attribute, or if the browser doesn't support it.

HTML Screenshot
<input type="range">
Screenshot of a plain slider control on macOS
ハッシュマーク付きの範囲コントロール

This range control is using a list attribute specifying the ID of a <datalist> which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an <option> element with its value set to the range's value at which a mark should be drawn.

HTML Screenshot
<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100">
</datalist>
Screenshot of a plain slider control on macOS
ハッシュマークとラベル付きの範囲コントロール

You can add labels to your range control by adding the label attribute to the <option> elements corresponding to the tick marks you wish to have labels for.

HTML Screenshot
<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>
Screenshot of a plain slider control on macOS

Note: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the <datalist> tag has to be styled with CSS as its display property is set to none by default, hiding the labels.

方向の変更

The HTML specification recommends that browsers automatically switch to drawing range controls vertically if the specified width is less than the height. Unfortunately, no major browsers currently support vertical range controls directly. You can, however, create a vertical range control by drawing a horizontal range control on its side. The easiest way is to use CSS: by applying a transform to rotate the element, you can make it vertical. Let's take a look.

HTML

The HTML needs to be updated to wrap the <input> in a <div> to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):

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

CSS

Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
Then comes the style information for the <input> element within the reserved space:
.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the transform-origin is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.

結果

ScreenshotLive sample

検証

There is no pattern validation available; however, the following forms of automatic validation are performed:

  • If the value is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input.
  • The value won't be less than min. The default is 0.
  • The value won't be greater than max. The default is 100.
  • The value will be a multiple of step. The default is 1.

In addition to the assorted examples above, you'll find range inputs demonstrated in these articles:

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="range"> の定義
現行の標準 初回定義
HTML 5.1
<input type="range"> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 23IE 完全対応 10Opera 完全対応 11Safari 完全対応 3.1WebView Android 完全対応 4.4
完全対応 4.4
未対応 2 — 4.4
補足
補足 Android WebView recognizes the range type, but doesn't implement a range-specific control.
Chrome Android 完全対応 57Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 ありSafari iOS 完全対応 5.1Samsung Internet Android ?
Tick mark supportChrome 完全対応 ありEdge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 841942.
IE ? Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? 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.
Edge Mobile ? 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 ?

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, SphinxKnight, silverskyvicto
最終更新者: mdnwebdocs-bot,