HTML5タグ虎の巻

input type="range"タグ

HTML5

input type="range"は、スライダー入力欄を作成するタグです。

解説

input type="range"を使うと、スライダー入力コントロールを作成できます。

スライダー入力は視覚的に入力した値が分かりやすいため、割合的な意味合いの入力をさせたい場合に便利です。

レンジ入力欄とも呼びます。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
なし

属性

input(type="range")タグには以下の属性が指定できます。

【属性】
属性説明
name名前を指定する(submit時にこの名前で送信される)
(例)name="rag01"
value値を指定する
(例)value="75"
 ※value値は数値のみ有効です。
min入力を許可する最小値を指定する
(例)min="1"
 ※デフォルト値は0です。
max入力を許可する最大値を指定する
(例)max="99"
 ※デフォルト値は100です。
stepステップ値を指定する
(例)step="5"
 ※ステップ値とは値の刻みです。5だと 5、10、15… が入力可能です。
 ※デフォルト値は1です。
readonly読取専用にする
(例)readonly="readonly"
 ※readonlyのみでもOKです。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

スライダー入力欄を作成する

<input type="range" name="rag01">

初期値は50%の位置です。

スライダー入力欄を作成する(最小値:1、最大値:99、初期値:80)

<input type="range" name="rag02" min="1" max="99" value="80">

スライダー入力欄を作成する(ステップ:10)

<input type="range" name="rag03" step="10">

値は10単位でのみ移動します。

スライダー入力欄を作成する(横幅:300px)

<input type="range" name="rag04" style="width:300px;">

スライダーの値を表示する

<form oninput="op.value=rag01.value">
  <input type="range" name="rag05" value="50" />
  <output name="op">50</output>
</form>
50

スライダーを動かすと値が変化します。

備考

  • input(type="range")は、HTML5から新たに追加になったタグです。
  • サイズを変更したい場合は、CSS(スタイルシート)をご使用ください。
  • スライダーの値を表示したい場合は、outputタグをご使用ください。

関連項目