input type range (HTML)

[4] HTML の input 要素の type 属性を range とすると、 数値を指定するフォーム制御子となります。

同様に数値を指定する number とは異なり、 range では正確な値は然程重要とは考えません。 値域の中のどの辺りの値かを利用者が直感的に判断できるべきときに使います。

[5] 仕様書:

値の構文

[6] number の項を参照。

値の例

[7] number の項を参照。

属性との関係

[8] step 属性の既定値は 1 です。 WF2 2.4

[1] min 属性の既定値は 1 です。 WF2 2.4

[2] max 属性の既定値は 100 です。 WF2 2.4

[3] value 属性の既定値は min 属性値です。 WF2 2.4

レンダリング

[9] 視覚利用者エージェントは slider 制御子を使用して構いません。 WF2 2.4

互換性

[13] 未対応利用者エージェントとの互換性

month に対応していない利用者エージェントは、 text (単一行文章入力制御子) として扱います。従って、利用者は任意の文字列を入力することができます。

ですから、著者は、対応している利用者エージェントが一般的になるまでの間、 フォーム制御子の近くで記入方法を説明しておくのがよいでしょう。 フォーム処理エージェントは記入された値が適当か検査するべきです (これは安全性の観点からも重要です)。

歴史

[10] この input type は Web Forms 2.0 で導入されました。

[101] Web Applications 1.0 r7787 Clarify this to make it clear that Chrome and IE's behaviours are wrong with <input type=range onchange>. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7786&to=7787

実装

[11] Opera 9 が実装しています。

関連

[12] 数値がより重要な場合に使うべき input type として、 number があります。

メモ

[17] 音量調整や輝度調整で使うのに適切な type です。 WF2 2.4

メモ

[102] Bug 13154 – WF3: Allow two handles on input type="range", like this: http://jqueryui.com/demos/slider/#range ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=13154

[103] Web Applications 1.0 r8435 <input type=range multiple min=0 value='25,75' max=100> for two-valued range controls ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8434&to=8435

[104] Web Applications 1.0 r8435 <input type=range multiple min=0 value='25,75' max=100> for two-valued range controls ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8434&to=8435

[14] Remove the unimplemented <input type="range" multiple> (domenic著, ) https://github.com/whatwg/html/commit/b598d4f873fb8c27d4b23b033837108edfbc3d75

[15] input type="range"のいろいろなCSSサンプル - Qiita ( ()) https://qiita.com/nezurika/items/ea3ae9a3e9ec3c158528