cman.jpWEBページ作成
広告
<input type="range"> 「範囲の選択（スライダ入力）」
<input type="range">は、数値の範囲を指定することで、スライダによる入力を可能とします。<br>正確な数値とならない場合もありますので注意が必要です。下記の留意事項をご確認ください。
※非対応のブラウザもあるため利用には注意が必要です。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<input type="range">の属性
【構文】
ページTOP
<input type="range" min="1" max="255" ・・・>
| 属性 | 意味 | 値のサンプルなど | ||||||
|---|---|---|---|---|---|---|---|---|
| name="固有名" | 入力に付ける固有名 | "text1" | ||||||
| value="値" | 初期値の表示(整数,小数,指数) 指定しない場合スライダの中心となる | "1","15.5","-5" | ||||||
| min="数値" | 入力できる最小値（整数,少数,指数) マイナスも指定可能 ※HTML5で追加 | "1","15.5","-5" | ||||||
| max="数値" | 入力できる最大値（整数,少数,指数) マイナスも指定可能 ※HTML5で追加 | "1","15.5","-5" | ||||||
| step="数値" | スライドする単位(整数,小数,指数) ※HTML5で追加 | "1"(初期値) | ||||||
| disabled | 入力の無効化 | "disabled" | ||||||
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" | ||||||
| autofocus | フォーカス（カーソル）を設定 ※HTML5で追加 | "autofocus" | ||||||
| list="ID名" | 入力候補のリスト指定 ※HTML5で追加 | "id01" | ||||||
| autocomplete="on","off" | オートコンプリート機能の使用有無 ※HTML5で追加 |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<input type="range">のサンプル
<input type="range" name="sample1" style="width:150px">
ブラウザによっては、スライダが表示され、値の選択が可能となります。
一部のブラウザで、送信(SUBMIT)時に数値チェックが行われます。
※非対応のブラウザもあるので注意が必要
ブラウザによって表示が異なります。画面イメージを確認
| ブラウザ | 範囲の選択（スライダ入力）支援 |
|---|---|
| IE11 |  |
| Chrome32 |  |
| Firefox27 |  |
| Safari5.1 |  |
初期値の指定【value, min, max, step】
小数指定：<input type="range" name="smp01" value="1" min="-10.0" max="29.9" step="0.1">
整数指定：<input type="range" name="smp02" value="1" min="-10" max="30" step="1">
指定なし：<input type="range" name="smp03">
整数指定：<input type="range" name="smp02" value="1" min="-10" max="30" step="1">
指定なし：<input type="range" name="smp03">
小数指定：Javascriptで取得した値=
整数指定：Javascriptで取得した値=
指定なし：Javascriptで取得した値=
ブラウザによっては、スライダが表示され、値の選択が可能となります。
※非対応のブラウザもあるので注意が必要
入力の無効化【disabled】
<input type="range" name="smp01" value="1" disabled>
オートコンプリートの使用有無【autocomplete】
<input type="range" name="smp01" autocomplete="off">
オートコンプリート無効
留意事項
- <input type="range">はHTML5で追加ました。このため、対応していないブラウザも多く執筆時点ではJavaScriptなどで同等機能を実現することが推奨されます。ただし、今後ブラウザのバージョンアップが行われ一般に浸透すれば有効なTYPEとなります。
※同等の機能を実現したJavascriptを表示
（初期値の指定の機能は除く）
※Javascriptで同等の機能を実現した動作サンプルは、「入力欄、ボタン」のサンプル画面 javascript版を参照下さい。
- value,min,max,stepに小数や指数を指定した場合、大まかな値（近似値）となります。
（例）サンプルです。実際の値とは異なる場合があります。
ブラウザ "25"の時のValue "-1.2"の時のValue IE 24.9999999999999 -1.2 Chrome 25 -1.2 FireFox 25 -1.2 safari 25 -1.1999999999999993
広告