Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<input type="range">

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

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

フォーム

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.input.type_range
4
12
23
3.1
57
5
html.elements.input.type_range.tick_marks

ティックマーク対応
≤67
79
109
12.1
≤67
12.2
html.elements.input.type_range.vertical_orientation

垂直方向のレンジスライダー
124
12
120
16.5
124
16.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 4件
実装メモ
  • writing-mode`プロパティによって利用可能な垂直方向（垂直コントロールを作成するを参照）。
  • input`要素に非標準の `-webkit-appearance: slider-vertical` スタイルを設定することで、縦向きを利用できます。これはプロプライエタリなので、他のブラウザのユーザーのために適切なフォールバックを含めない限り、使用すべきではありません。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (124)
注釈 1件
実装メモ
  • input`要素に`writing-mode: bt-lr`スタイルを設定することで縦向きにすることができる。
注釈 4件
実装メモ
  • writing-mode`プロパティによって利用可能な垂直方向（垂直コントロールを作成するを参照）。
  • 非標準の `orient="vertical"` 属性の使用をサポート。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (120)
注釈 4件
実装メモ
  • writing-mode`プロパティによって利用可能な垂直方向（垂直コントロールを作成するを参照）。
  • input`要素に非標準の `-webkit-appearance: slider-vertical` スタイルを設定することで、縦向きを利用できます。これはプロプライエタリなので、他のブラウザのユーザーのために適切なフォールバックを含めない限り、使用すべきではありません。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (16.5)
注釈 4件
実装メモ
  • writing-mode`プロパティによって利用可能な垂直方向（垂直コントロールを作成するを参照）。
  • input`要素に非標準の `-webkit-appearance: slider-vertical` スタイルを設定することで、縦向きを利用できます。これはプロプライエタリなので、他のブラウザのユーザーのために適切なフォールバックを含めない限り、使用すべきではありません。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (124)
注釈 4件
実装メモ
  • writing-mode`プロパティによって利用可能な垂直方向（垂直コントロールを作成するを参照）。
  • input`要素に非標準の `-webkit-appearance: slider-vertical` スタイルを設定することで、縦向きを利用できます。これはプロプライエタリなので、他のブラウザのユーザーのために適切なフォールバックを含めない限り、使用すべきではありません。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (16.5)

基本構文

HTML 
<label>Volume:
  <input type="range" min="0" max="100" value="50">
</label>

<label>Brightness:
  <input type="range" min="0" max="100" step="5" value="75">
</label>

ライブデモ

basic slider

Control. with Range type in sliderUI provide.min / max / step.

プレビュー全画面表示

Settings panel

Range slider settingsimageface. UI and usage.

プレビュー全画面表示

col-adjustslider

RGB value slider in adjustUI.

プレビュー全画面表示

実務での使いどころ

  • <input type="range"> の活用

    <input> 要素の range 型は、指定された値より小さくなく、別に指定された値より大きくない値をユーザーに指定させるために使用します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク