<input type="range">

　<input type="range">は、調整バーによる数値入力ができるFORMエレメントの部品です。 input のタイプのひとつです。

<label>数値 : <input name="val_range" type="range" value="0" onchange="document.getElementById('viewer_example').innerText=this.value;" /></label>

実行結果

数値 :

　<label>エレメントによって項目名や説明を付けることができます。

　値は value 属性の値から知ることができますが、ほとんどブラウザでは value 値は表示されません。
　値を表示するには、onchange イベントハンドラーといった JavaScript の利用が必要になります。

　CSS、スタイルシートを利用して入力値を検証するには:in-range、:out-of-rangeクラスを使います。
　入力値の範囲によって自動的にスタイルを反映します。

- ad -

属性

　グローバル属性も持ちます。以下に主な属性のみを示します。

　ここでは送信するという前提でnameパラメーターは付けるようにしています。送信したくないデータにはnameパラメーターを付けない方法があります。

Attribute	Value	Extra information
type		扱うデータタイプまたはinputタグの形状
name		＊必須。データ送信のための属性です。
value		初期値または設定値
id		cssにも使えます。エレメントをユニークとします。
class		cssに使います。同名のclassは同じスタイルが適応されます。
max		最大値。入力範囲の最大値。
min		最小値。入力範囲の最小値。
step		入力値の間隔。

入力項目名

ブラウザでの見え方（このページのスタイルが反映されています）