<input type="range">
====================

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

この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。

試してみましょう
--------

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

### 検証

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

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

`value` 属性は、選択された数値を文字列で格納します。値は空文字列 (`""`) になることはありません。既定値は指定した最小値と最大値の中間の値です。ただし、最大値が最小値より小さい場合は、`min` 属性の値が既定値に設定されます。既定値を決定するアルゴリズムは次の通りです。


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


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

追加の属性
-----

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

### list

list 属性の値は、同じ文書内にある `<datalist>` 要素の `id` です。 `<datalist>` は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち、この `type` と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の目盛りの追加を参照してください。

### max

この入力欄が受け付ける最大値です。要素に入力された `value` がこれを超えた場合、要素は制約検証に失敗します。 `max` 属性の値が数値でない場合、要素は最大値を持ちません。

この値は `min` 属性の値より大きいか、等しくしなければなりません。HTML の `max` 属性を参照してください。

### min

許可されている値の範囲の最小値です。要素の `value` がこれより小さい場合、要素は制約検証に失敗します。 `min` 属性の値が数値でない場合、要素は最小値を持ちません。

この値は `max` 属性の値以下でなければなりません。 HTML の `min` 属性を参照してください。

**メモ:** もし `min` と `max` の値が等しかったり、`max` の値が `min` の値より低かったりすると、ユーザーはその範囲を操作することができなくなります。

### step

`step` 属性は値が吸着する粒度を指定する数値です。指定した刻み間隔（`min` を指定した場合は `value`、それ以外の場合は適切な既定値）に一致する値のみが有効となります。

`step` 属性には文字列値 `any` を設定することもできます。この `step` 値は、刻み間隔を意味せず、指定した範囲内で任意の値が許されることを意味します（他にも `min` や `max` のような制約がある場合は除きます）。対応しているブラウザーでこのように動作するのかについては、step を `any` に設定の例を参照してください。

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

`range` 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を*除いて*、整数の入力のみを許可します。例えば、 `min` に -10 を、 `value` に 1.5 を設定した場合、 `step` が 1 の場合は正の方向に 1.5, 2.5, 3.5,… など、負の方向に -0.5, -1.5, -2.5,… などのみが許可されます。 HTML の `step` 属性を参照してください。

標準外の属性
------

### orient

CSS の標準外の -moz-orient non-standard プロパティと同様に `<progress>` および `<meter>` 要素に影響を与える `orient` 属性は、範囲スライダーの向きを定義する定義します。値は `horizontal` が範囲を水平方向に描画することを、 `vertical` が範囲を垂直に描画することを意味します。

**メモ:** input 型の属性のうち、 `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src` は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。

例
-

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

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

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

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

### 最小値と最大値の指定

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

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


```html
<input type="range" min="-10" max="10" />
```

### 値の粒度の設定

既定では、粒度は 1 であり、値は常に整数であることを意味します。粒度は、`step` 属性を変更することで制御することができます。例えば、 5 から 10 の中間値が必要であれば、`step` の値を 0.5 に設定してください。

#### step 属性の設定


```html
<input type="range" min="5" max="10" step="0.5" />
```


#### step を "any" に設定

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

##### HTML


```html
<input id="pi\_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>
```


##### JavaScript


```js
const value = document.querySelector("#value");
const input = document.querySelector("#pi\_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});
```


##### 結果

この例では、 0 から π までの任意の値を選択することができ、選択された値の小数部は制限されません。JavaScript は、ユーザーが範囲と対話することによって値がどのように変化するかを示すために使用されます。

### 目盛の追加

範囲コントロールに目盛を追加するには、`list` 属性を記載して、それにコントロール上の一連の目盛を定義する `<datalist>` 要素の `id` を指定します。各点は `<option>` 要素を使用して表現され、その `value` には、マークを描画すべき範囲の値が設定されます。

#### HTML


```html
<label for="temp">快適な温度を選択してください。</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>
```


#### 結果

### 同じデータリストを複数の範囲コントロールで使用

コードの重複を防ぐために、同じ `<datalist>` を複数の `<input type="range">` 要素や他の `<input>` 型に再利用することができます。

**メモ:** 下記の例のようにラベルを表示することもしたい場合は、それぞれの範囲の入力に対して `datalist` が必要です。

#### HTML


```html
<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>
```


#### 結果

### ラベルの追加

目盛には `<option>` 要素に `label` 属性を与えることで、ラベル付けをすることができます。ただし、既定では、ラベルのコンテンツは表示されません。このラベルを表示したり、ラベルを正しい位置に配置するためには CSS を使用してください。以下はその方法の一つです。

#### HTML


```html
<label for="temp">快適な温度を選択してください。</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="とても冷たい"></option>
  <option value="25" label="冷たい"></option>
  <option value="50" label="ふつう"></option>
  <option value="75" label="やや温かい"></option>
  <option value="100" label="熱い"></option>
</datalist>
```


#### CSS


```css
datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}
```


#### 結果

### 垂直の範囲コントロール

既定では、ブラウザーは範囲入力を、つまみが左右にスライドするスライダーとして描画します。

つまみが上下にスライドする垂直方向の範囲を作成するには、CSS の `appearance` プロパティを `slider-vertical` に設定し、Firefox の標準外の `orient` 属性を記載してください。

#### 水平の範囲コントロール

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


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


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

#### appearance プロパティの使用

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

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


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


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


```css
input[type="range"] {
  appearance: slider-vertical;
}
```


#### orient 属性の使用

Firefox だけですが、標準外の `orient` プロパティがあります。

前述の例と同様の HTML を使用しますが、この属性に `vertical` の値を設定します。


```html
<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" />
```


入力型が range のものだけを対象に、書字方向を `bt-lr`、すなわち下から上へ、右から左へ設定します。


```css
input[type="range"] {
  writing-mode: bt-lr;
}
```


#### すべて一緒に設定

上記の例は動作するブラウザーが異なるため、単一の例が複数のブラウザーで動作するように一緒に指定することができます。

`orient` 属性に `vertical` の値を設定することで Firefox に対応します。


```html
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
```


`input` の `type` が `range` で `orient` が `vertical` のものだけを対象とし、`writing-mode` を既定値から `bt-lr` （下から上、左から右）に変更し、Blink と Webkit のブラウザーに対応している `appearance: slider-vertical` を追加します。


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

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 選択された数値の文字列表現を示す文字列。数値として値を取得するには `valueAsNumber` を使用してください。 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `max`,
 `min`, and
 `step` |
| **IDL 属性** | `list`, `value`, `valueAsNumber` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `stepDown()`
 および `stepUp()` |
| **暗黙の ARIA ロール** | `slider` |

仕様書
---

| Specification |
| --- |
| HTML Standard # range-state-(type=range) |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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