[html5] r7539 - / images

[whatwg at whatwg.org]

Author: ianh
Date: 2012-11-24 20:36:42 -0800 (Sat, 24 Nov 2012)
New Revision: 7539

Added:
   images/sample-range-labels.png
Modified:
   complete.html
   index
   source
Log:
[e] (0) type=range examples
Affected topics: HTML

Modified: complete.html
===================================================================
--- complete.html	2012-11-25 04:09:25 UTC (rev 7538)
+++ complete.html	2012-11-25 04:36:42 UTC (rev 7539)
@@ -49134,7 +49134,7 @@
  <option value="0">
  <option value="-30">
  <option value="30">
- <option value="+50">
+<span class=bad> <option value="++50"></span>
 </datalist>
 </pre>
 
@@ -49153,7 +49153,7 @@
    the author-specified completion values and then adding longer tick
    marks at the extremes.</p>
 
-   <p>Note also how the invalid value <code title="">+50</code> was
+   <p>Note also how the invalid value <code title="">++50</code> was
    completely ignored.</p>
 
   </div>
@@ -49179,8 +49179,23 @@
 
   </div>
 
+  <div class=example>
 
+   <p>Finally, here is an example of a range control with two labeled values:</p>
 
+   <pre><input type="range" name="a" list="a-values">
+<datalist id="a-values">
+ <option value="10" label="Low">
+ <option value="90" label="High">
+</datalist>
+</pre>
+
+   <p>With styles that make the control draw vertically, it might look as follows:</p>
+
+   <p><img alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164 src=http://images.whatwg.org/sample-range-labels.png width=103></div>
+
+
+
   <h6 id="color-state-(type=color)"><span class=secno>4.10.7.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state (<code title="">type=color</code>)</h6>
 
   <div class=impl>

Added: images/sample-range-labels.png
===================================================================
(Binary files differ)


Property changes on: images/sample-range-labels.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: index
===================================================================
--- index	2012-11-25 04:09:25 UTC (rev 7538)
+++ index	2012-11-25 04:36:42 UTC (rev 7539)
@@ -49134,7 +49134,7 @@
  <option value="0">
  <option value="-30">
  <option value="30">
- <option value="+50">
+<span class=bad> <option value="++50"></span>
 </datalist>
 </pre>
 
@@ -49153,7 +49153,7 @@
    the author-specified completion values and then adding longer tick
    marks at the extremes.</p>
 
-   <p>Note also how the invalid value <code title="">+50</code> was
+   <p>Note also how the invalid value <code title="">++50</code> was
    completely ignored.</p>
 
   </div>
@@ -49179,8 +49179,23 @@
 
   </div>
 
+  <div class=example>
 
+   <p>Finally, here is an example of a range control with two labeled values:</p>
 
+   <pre><input type="range" name="a" list="a-values">
+<datalist id="a-values">
+ <option value="10" label="Low">
+ <option value="90" label="High">
+</datalist>
+</pre>
+
+   <p>With styles that make the control draw vertically, it might look as follows:</p>
+
+   <p><img alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164 src=http://images.whatwg.org/sample-range-labels.png width=103></div>
+
+
+
   <h6 id="color-state-(type=color)"><span class=secno>4.10.7.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state (<code title="">type=color</code>)</h6>
 
   <div class=impl>

Modified: source
===================================================================
--- source	2012-11-25 04:09:25 UTC (rev 7538)
+++ source	2012-11-25 04:36:42 UTC (rev 7539)
@@ -57370,7 +57370,7 @@
  <option value="0">
  <option value="-30">
  <option value="30">
- <option value="+50">
+<span class="bad"> <option value="++50"></span>
 </datalist>
 </pre>
 
@@ -57391,7 +57391,7 @@
    the author-specified completion values and then adding longer tick
    marks at the extremes.</p>
 
-   <p>Note also how the invalid value <code title="">+50</code> was
+   <p>Note also how the invalid value <code title="">++50</code> was
    completely ignored.</p>
 
   </div>
@@ -57417,8 +57417,25 @@
 
   </div>
 
+  <div class="example">
 
+   <p>Finally, here is an example of a range control with two labeled values:</p>
 
+   <pre><input type="range" name="a" list="a-values">
+<datalist id="a-values">
+ <option value="10" label="Low">
+ <option value="90" label="High">
+</datalist>
+</pre>
+
+   <p>With styles that make the control draw vertically, it might look as follows:</p>
+
+   <p><img src="images/sample-range-labels.png" width="103" height="164" alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'.">
+
+  </div>
+
+
+
   <h6><dfn title="attr-input-type-color">Color</dfn> state (<code title="">type=color</code>)</h6>
 
   <div class="impl">