input type=range new : スライダー
デモ
<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="++50">
</datalist>
<input type="range" name="a" list="a-values">
<datalist id="a-values">
<option value="10" label="Low">
<option value="90" label="High">
</datalist>属性 属性値の見方
- autocompleteon|off|[オートフィル]
- オートコンプリートの有効/無効。デフォルトon。
- list[ID]
△
△
✗
△
△
✗
✗
△
- サジェストする値の一覧を示すdatalistのIDを指定。 指定した値の場所にマークが付く。ラベルを指定した場合、そのマークのところにラベルに指定した文字が表示される。
- max[数値]
- min[数値]
- step[正の数値]|any
- 1.5の場合は0、1.5、3といった具合にステップを刻む。間の値、例えば1.2は妥当でないとみなされる。anyは未設定と同様で、ステップを設定しない。
- value[数値]
- 指定した値は初期値として利用される。ユーザーの入力に応じて値が変化する。フォーム送信時にname属性とvalue属性のペアでサーバーに送信される。
- autofocus
new(真偽値) △
- ページロード時、ダイアログ表示時に自動でその要素にフォーカスする。
- disabled(真偽値)
- そのフィールドを無効にする。値も送信されない。類似の属性にreadonlyがあるが、こちらは編集はできないが選択でき、値も送信される。
- form
new[ID] ✗
- 関連付けるformのid属性の値を指定（name属性ではなく）。無い場合は親になっているform要素に関連付けられる。
- name[文字列]
- そのフィールドの名前。name属性とvalue属性のペアでサーバーに送信される。
- type 変更[列挙型]
-
デフォルトはtext。
- hidden: 隠しフィールド。固定値を送信したい場合に利用。
- text: テキスト入力欄かコンボボックス。
- search new: 検索フィールドかコンボボックス。
- tel new: テキスト入力欄かコンボボックス。
- url new: テキスト入力欄かコンボボックス。
- email new: テキスト入力欄かコンボボックス。
- password: ブラインドされたテキスト入力欄。
- date new: 日付コントロール。
- month new: 月コントロール。
- week new: 週コントロール。
- time new: 時間コントロール。
- datetime-local new: 日時コントロール。
- number new: テキスト入力欄かコンボボックスかスピナー。
- range new: スライダーかそれに類似のコントロール。
- color new: カラーピッカー。
- checkbox: チェックボックス。
- radio: ラジオボタン。
- file: ファイルアップロードフォーム。
- submit: 送信ボタン。
- image: 画像ボタン。
- reset: リセットボタン。関連付けられたリセット可能なフォーム部品がリセットされる。
- button: 何の変哲もないボタン。