トップページ >  HTML5 >  <input type="range">
初版2013/02/27： 最終更新日2013/02/27
<input type="range">
目次
・<input type="range">
・rangeをサブミットする
<input type="range">
HTML5でinputのtype属性にrangeが追加されました。
以下、例です。



以下、ソースです。

<input type="range" />

Chrome25で動作確認済みです。

rangeをサブミットする
range属性をサブミットしてみます。


以下、ソースです。

<form action="sample.php" method="POST" target="_blank">
<input type="range" name="rangeData" />
<input type="submit" />
</form>

色々レンジを変更して送信すると、デフォルト値は50、最大値は100、最小値は0であることがわかります。
最大、最小を変更したい場合はmax属性、min属性を指定します。
以下、最大を200、最小を-100にした例です。



以下、ソースです。

<form action="sample.php" method="POST" target="_blank">
<input type="range" name="rangeData" max="200" min="-100" />
<input type="submit" />
</form>

step属性を指定するとその数値を最小の単位としてレンジ値は変わります。
以下は、stepを5にした例です。

<form action="sample.php" method="POST" target="_blank">
<input type="range" name="rangeData" max="200" min="-100" step="5" />
<input type="submit" />
</form>

HOME