Edit

Page

Page title:

Page body:

* [CODE(HTMLe)@en[input]] [CODE(HTMLa)@en[type]] [CODE(HTML)@en[range]] (HTML)

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

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

[5] 仕様書:
- [[Web Forms 2.0]]
-- [CSECTION@en[2.4. Extensions to the [CODE(HTMLe)@en[[[input]]]] element]]
<IW:WF2:"#extensions">

** 値の構文

[6] [CODE(HTML)@en[[[number]>>6]]] の項を参照。

** 値の例

[7] [CODE(HTML)@en[[[number]>>7]]] の項を参照。

** 属性との関係

[8]
[CODE(HTMLa)@en[[[step]]]] [[属性]]の[[既定値]]は [CODE(HTML)[[[1]]]] です。
[SRC@en[WF2 2.4]]

[1]
[CODE(HTMLa)@en[[[min]]]] [[属性]]の[[既定値]]は
[CODE(HTML)[[[1]]]] です。
[SRC@en[WF2 2.4]]

[2]
[CODE(HTMLa)@en[[[max]]]] [[属性]]の[[既定値]]は
[CODE(HTML)[[[100]]]] です。
[SRC@en[WF2 2.4]]

[3]
[CODE(HTMLa)@en[[[value]]]] [[属性]]の[[既定値]]は
[CODE(HTMLa)@en[[[min]]]] [[属性値]]です。
[SRC@en[WF2 2.4]]

[[#comment]]

** レンダリング

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

[[#comment]]

** 互換性

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

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

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

[[#comment]]

** 歴史

[10]
この [CODE(HTMLe)@en[[[input]]]] [CODE(HTMLa)@en[[[type]]]]
は [[Web Forms 2.0]] で導入されました。

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

** 実装

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

[[#comment]]

** 関連

[12]
[[数値]]がより重要な場合に使うべき
[CODE(HTMLe)@en[[[input]]]] [CODE(HTMLa)@en[[[type]]]]
として、 [CODE(HTML)@en[[[number]]]] があります。

[[#comment]]

** メモ

[17]
[[音量調整]]や[[輝度調整]]で使うのに適切な
[CODE(HTMLa)@en[[[type]]]] です。
[SRC@en[WF2 2.4]]

[[#comment]]

* メモ

[102] [CITE@en[Bug 13154 – WF3: Allow two handles on input type="range", like this: http://jqueryui.com/demos/slider/#range]]
( ([TIME[2013-10-15 23:41:50 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=13154>

[103] [CITE@en[Web Applications 1.0 r8435       <input type=range multiple min=0 value='25,75' max=100> for two-valued range controls]]
( ([TIME[2014-01-30 05:40:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8434&to=8435>

[104] [CITE@en[Web Applications 1.0 r8435       <input type=range multiple min=0 value='25,75' max=100> for two-valued range controls]]
( ([TIME[2014-01-30 05:40:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8434&to=8435>

[14] [CITE@en[Remove the unimplemented <input type="range" multiple>]]
([[domenic]]著, [TIME[2016-07-19 02:16:20 +09:00]])
<https://github.com/whatwg/html/commit/b598d4f873fb8c27d4b23b033837108edfbc3d75>

[15] [CITE[input type="range"のいろいろなCSSサンプル - Qiita]]
( ([TIME[2017-05-02 11:31:20 +09:00]]))
<https://qiita.com/nezurika/items/ea3ae9a3e9ec3c158528>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)