HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )

HTML5 の input 要素の拡張は、IE11 ではかなり遅れているというか控えめなのですが、何故か気合が入っているのが、type=range を使ったいわゆる『スライダー』コントロールです



ある範囲を指定する為のコントロールなので、min、max、step 属性が併用できます。何も指定しなければ、min="0" max="100" step="1" を指定した事になります。

両端の値は残念ながら表示される事は無く、スライダーを動かした時の値が表示されるのは、IE11 のみで、そのままでは Chrome や Firefox でリアルタイムに値を知る事ができません。

そこで、もう一つフィールドを追加してスライダーの onmousemove イベントで値をセットしてみました。

▼ 実際の実行

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="range"
		name="userid"
		onmousemove='document.getElementById("userid2").value=this.value;'>
	<br>
	<input type="number"
		name="userid2"
		id="userid2">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>