[html5] r8437 - [e] (0) New <input type=range multiple> example Fixing https://www.w3.org/Bugs/P [...]

[whatwg at whatwg.org]

Author: ianh
Date: 2014-01-29 18:01:49 -0800 (Wed, 29 Jan 2014)
New Revision: 8437

Modified:
   complete.html
   index
   source
Log:
[e] (0) New <input type=range multiple> example
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=13154
Affected topics: HTML

Modified: complete.html
===================================================================
--- complete.html	2014-01-30 00:14:46 UTC (rev 8436)
+++ complete.html	2014-01-30 02:01:49 UTC (rev 8437)
@@ -42128,6 +42128,28 @@
 
     </div>
 
+    <div class=example>
+
+     <p>Consider a user interface that filters possible flights by departure and arrival time:</p>
+
+     <pre><form ...>
+ <fieldset>
+  <legend>Outbound flight time</legend>
+  <select ...>
+   <option>Departure
+   <option>Arrival
+  </select>
+  <p><output name=o1>00:00</output> – <output name=o2>24:00</output></p>
+  <input type=range min=0 max=24 value=0,24 step=1.0 ...
+         oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'">
+ </fieldset>
+ ...
+</form></pre>
+
+     <p>With appropriate styling, this might look like:</p>
+
+     <img src=http://images.whatwg.org/sample-range-multiple.png alt="A control group with the label 'Outbound flight time', showing a drop-down that lets you select Departure vs Arrival, a two-handled range control that lets you set the start and end time of the range, and a label showing the currently selected times."></div>
+
    </dd>
 
   </dl><p>When the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is set or removed, the

Modified: index
===================================================================
--- index	2014-01-30 00:14:46 UTC (rev 8436)
+++ index	2014-01-30 02:01:49 UTC (rev 8437)
@@ -42128,6 +42128,28 @@
 
     </div>
 
+    <div class=example>
+
+     <p>Consider a user interface that filters possible flights by departure and arrival time:</p>
+
+     <pre><form ...>
+ <fieldset>
+  <legend>Outbound flight time</legend>
+  <select ...>
+   <option>Departure
+   <option>Arrival
+  </select>
+  <p><output name=o1>00:00</output> – <output name=o2>24:00</output></p>
+  <input type=range min=0 max=24 value=0,24 step=1.0 ...
+         oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'">
+ </fieldset>
+ ...
+</form></pre>
+
+     <p>With appropriate styling, this might look like:</p>
+
+     <img src=http://images.whatwg.org/sample-range-multiple.png alt="A control group with the label 'Outbound flight time', showing a drop-down that lets you select Departure vs Arrival, a two-handled range control that lets you set the start and end time of the range, and a label showing the currently selected times."></div>
+
    </dd>
 
   </dl><p>When the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is set or removed, the

Modified: source
===================================================================
--- source	2014-01-30 00:14:46 UTC (rev 8436)
+++ source	2014-01-30 02:01:49 UTC (rev 8437)
@@ -46012,6 +46012,30 @@
 
     </div>
 
+    <div class="example">
+
+     <p>Consider a user interface that filters possible flights by departure and arrival time:</p>
+
+     <pre><form ...>
+ <fieldset>
+  <legend>Outbound flight time</legend>
+  <select ...>
+   <option>Departure
+   <option>Arrival
+  </select>
+  <p><output name=o1>00:00</output> – <output name=o2>24:00</output></p>
+  <input type=range min=0 max=24 value=0,24 step=1.0 ...
+         oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'">
+ </fieldset>
+ ...
+</form></pre>
+
+     <p>With appropriate styling, this might look like:</p>
+
+     <img src="images/sample-range-multiple.png" alt="A control group with the label 'Outbound flight time', showing a drop-down that lets you select Departure vs Arrival, a two-handled range control that lets you set the start and end time of the range, and a label showing the currently selected times.">
+
+    </div>
+
    </dd>
 
   </dl>