<input type="range">

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

検証

パターン検証は使えませんが、次のような検証が自動的に行われます。

• もし 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 型の入力欄は次の属性にも対応しています。

オプションの表示がサポートされたブラウザーでどのように行われるかは、下の ハッシュマーク付きの範囲コントロール を参照してください。

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

<progress> や <meter> に影響する -moz-orient 非標準 CSS プロパティと同じように、orient 属性は範囲スライダーの方向を定義します。設定可能な値には、水平方向に描画されることを意味する horizontal と、垂直方向に描画されることを意味する vertical があります。

使用例

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

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

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

方向の変更

ブラウザーが範囲入力をスライダーとして描画する場合、デフォルトではノブが左右にスライドするように描画します。サポートされているならば、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 フォーム
• <input> およびそれに基づく HTMLInputElement インターフェイス
• <input type="number">
• validityState.rangeOverflow および validityState.rangeUnderflow
• Controlling multiple parameters with ConstantSourceNode
• Styling the range element