この翻訳は不完全です。英語から この記事を翻訳 してください。

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

ユーザーのブラウザーが "range" 型に対応していない場合は、 "text" 入力にフォールバックされ、その型として扱われます。

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

The value attribute contains a DOMString which contains a string representation of the selected number. The value is never an empty string (""). The default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the min attribute. The algorithm for determining the default value is:

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

If an attempt is made to set the value lower than the minimum, it is set to the minimum. Similarly, an attempt to set the value higher than the maximum results in it being set to the maximum.

範囲入力の使用

While the "number" type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. The "range" input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is.

A few examples of situations in which range inputs are commonly used:

  • Audio controls such as volume and balance, or filter controls.
  • Color configuration controls such as color channels, transparency, brightness, etc.
  • Game configuration controls such as difficulty, visibility distance, world size, and so forth.
  • Password length for a password manager's generated passwords.

As a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. For example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5".

最小値と最大値の指定

By default, the minimum is 0 and the maximum is 100. If that's not what you want, you can easily specify different bounds by changing the values of the min and/or max attributes. These can be any floating-point value.

For example, to ask the user for a value between -10 and 10, you can use:

<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 ?

凡例

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

関連情報

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

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