[e] (0) New <input type=range multiple> example

Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=13154 Affected topics: HTML git-svn-id: http://svn.whatwg.org/webapps@8437 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Jan 30, 2014 · 4408938 · 4408938
1 parent bc2f3e5
commit 4408938
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 0 deletions.
diff --git a/complete.html b/complete.html
@@ -42128,6 +42128,28 @@ <h6 id="range-state-(type=range)"><span class=secno>4.10.5.1.14 </span><dfn titl
 
     </div>
 
+    <div class=example>
+
+     <p>Consider a user interface that filters possible flights by departure and arrival time:</p>
+
+     <pre>&lt;form ...&gt;
+ &lt;fieldset&gt;
+  &lt;legend&gt;Outbound flight time&lt;/legend&gt;
+  &lt;select ...&gt;
+   &lt;option&gt;Departure
+   &lt;option&gt;Arrival
+  &lt;/select&gt;
+  &lt;p&gt;&lt;output name=o1&gt;00:00&lt;/output&gt; &ndash; &lt;output name=o2&gt;24:00&lt;/output&gt;&lt;/p&gt;
+  &lt;input type=range min=0 max=24 value=0,24 step=1.0 ...
+         oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'"&gt;
+ &lt;/fieldset&gt;
+ ...
+&lt;/form&gt;</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

diff --git a/index b/index
@@ -42128,6 +42128,28 @@ ldh-str       = &lt; as defined in <a href=http://tools.ietf.org/html/rfc1034#se
 
     </div>
 
+    <div class=example>
+
+     <p>Consider a user interface that filters possible flights by departure and arrival time:</p>
+
+     <pre>&lt;form ...&gt;
+ &lt;fieldset&gt;
+  &lt;legend&gt;Outbound flight time&lt;/legend&gt;
+  &lt;select ...&gt;
+   &lt;option&gt;Departure
+   &lt;option&gt;Arrival
+  &lt;/select&gt;
+  &lt;p&gt;&lt;output name=o1&gt;00:00&lt;/output&gt; &ndash; &lt;output name=o2&gt;24:00&lt;/output&gt;&lt;/p&gt;
+  &lt;input type=range min=0 max=24 value=0,24 step=1.0 ...
+         oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'"&gt;
+ &lt;/fieldset&gt;
+ ...
+&lt;/form&gt;</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

diff --git a/source b/source
@@ -46012,6 +46012,30 @@ ldh-str       = &lt; as defined in <a href="http://tools.ietf.org/html/rfc1034#s
 
     </div>
 
+    <div class="example">
+
+     <p>Consider a user interface that filters possible flights by departure and arrival time:</p>
+
+     <pre>&lt;form ...>
+ &lt;fieldset>
+  &lt;legend>Outbound flight time&lt;/legend>
+  &lt;select ...>
+   &lt;option>Departure
+   &lt;option>Arrival
+  &lt;/select>
+  &lt;p>&lt;output name=o1>00:00&lt;/output> &ndash; &lt;output name=o2>24:00&lt;/output>&lt;/p>
+  &lt;input type=range min=0 max=24 value=0,24 step=1.0 ...
+         oninput="o1.value = valueLow + ':00'; o2.value = valueHigh + ':00'">
+ &lt;/fieldset>
+ ...
+&lt;/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>