Skip to content

Commit

Permalink
[e] (0) Move <input type=range> examples
Browse files Browse the repository at this point in the history 
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=13154
Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@8436 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jan 30, 2014
1 parent 1efac39 commit bc2f3e5
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 215 deletions.
138 changes: 68 additions & 70 deletions complete.html
View file
Expand Up @@ -298,7 +298,7 @@

<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 29 January 2014</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 30 January 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
Expand Down Expand Up @@ -41970,6 +41970,73 @@ <h6 id="range-state-(type=range)"><span class=secno>4.10.5.1.14 </span><dfn titl

</div>

<div class=example>

<p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
full range of the control that are especially important, such as preconfigured light levels or
typical speed limits in a range control used as a speed control. The following markup
fragment:</p>

<pre>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
&lt;option value="0"&gt;
&lt;option value="-30"&gt;
&lt;option value="30"&gt;
<span class=bad> &lt;option value="++50"&gt;</span>
&lt;/datalist&gt;
</pre>

<p>...with the following style sheet applied:</p>

<pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>

<p>...might render as:</p>

<p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
style-sheet-specified height and width properties. The colors were similarly derived from the
style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
UA deciding to only use 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 completely ignored.</p>

</div>

<div class=example>

<p>For another example, consider the following markup fragment:</p>

<pre>&lt;input name=x type=range min=100 max=700 step=9.09090909 value=509.090909&gt;</pre>

<p>A user agent could display in a variety of ways, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>

<p>Or, alternatively, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>

<p>The user agent could pick which one to display based on the dimensions given in the style
sheet. This would allow it to maintain the same resolution for the tick marks, despite the
differences in width.</p>

</div>

<div class=example>

<p>Finally, here is an example of a range control with two labeled values:</p>

<pre>&lt;input type="range" name="a" list="a-values"&gt;
&lt;datalist id="a-values"&gt;
&lt;option value="10" label="Low"&gt;
&lt;option value="90" label="High"&gt;
&lt;/datalist&gt;
</pre>

<p>With styles that make the control draw vertically, it might look as follows:</p>

<p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>

</dd>

<dt>When the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute <em>is</em> specified on
Expand Down Expand Up @@ -42168,75 +42235,6 @@ <h6 id="range-state-(type=range)"><span class=secno>4.10.5.1.14 </span><dfn titl

</div>

<!--CLEANUP--><!-- move these into the relevant subsection above -->

<div class=example>

<p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
full range of the control that are especially important, such as preconfigured light levels or
typical speed limits in a range control used as a speed control. The following markup
fragment:</p>

<pre>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
&lt;option value="0"&gt;
&lt;option value="-30"&gt;
&lt;option value="30"&gt;
<span class=bad> &lt;option value="++50"&gt;</span>
&lt;/datalist&gt;
</pre>

<p>...with the following style sheet applied:</p>

<pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>

<p>...might render as:</p>

<p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
style-sheet-specified height and width properties. The colors were similarly derived from the
style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
UA deciding to only use 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 completely ignored.</p>

</div>

<div class=example>

<p>For another example, consider the following markup fragment:</p>

<pre>&lt;input name=x type=range min=100 max=700 step=9.09090909 value=509.090909&gt;</pre>

<p>A user agent could display in a variety of ways, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>

<p>Or, alternatively, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>

<p>The user agent could pick which one to display based on the dimensions given in the style
sheet. This would allow it to maintain the same resolution for the tick marks, despite the
differences in width.</p>

</div>

<div class=example>

<p>Finally, here is an example of a range control with two labeled values:</p>

<pre>&lt;input type="range" name="a" list="a-values"&gt;
&lt;datalist id="a-values"&gt;
&lt;option value="10" label="Low"&gt;
&lt;option value="90" label="High"&gt;
&lt;/datalist&gt;
</pre>

<p>With styles that make the control draw vertically, it might look as follows:</p>

<p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>



<h6 id="color-state-(type=color)"><span class=secno>4.10.5.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state (<code title="">type=color</code>)</h6>
Expand Down
138 changes: 68 additions & 70 deletions index
View file
Expand Up @@ -298,7 +298,7 @@

<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 29 January 2014</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 30 January 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
Expand Down Expand Up @@ -41970,6 +41970,73 @@ ldh-str = &lt; as defined in <a href=http://tools.ietf.org/html/rfc1034#se

</div>

<div class=example>

<p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
full range of the control that are especially important, such as preconfigured light levels or
typical speed limits in a range control used as a speed control. The following markup
fragment:</p>

<pre>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
&lt;option value="0"&gt;
&lt;option value="-30"&gt;
&lt;option value="30"&gt;
<span class=bad> &lt;option value="++50"&gt;</span>
&lt;/datalist&gt;
</pre>

<p>...with the following style sheet applied:</p>

<pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>

<p>...might render as:</p>

<p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
style-sheet-specified height and width properties. The colors were similarly derived from the
style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
UA deciding to only use 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 completely ignored.</p>

</div>

<div class=example>

<p>For another example, consider the following markup fragment:</p>

<pre>&lt;input name=x type=range min=100 max=700 step=9.09090909 value=509.090909&gt;</pre>

<p>A user agent could display in a variety of ways, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>

<p>Or, alternatively, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>

<p>The user agent could pick which one to display based on the dimensions given in the style
sheet. This would allow it to maintain the same resolution for the tick marks, despite the
differences in width.</p>

</div>

<div class=example>

<p>Finally, here is an example of a range control with two labeled values:</p>

<pre>&lt;input type="range" name="a" list="a-values"&gt;
&lt;datalist id="a-values"&gt;
&lt;option value="10" label="Low"&gt;
&lt;option value="90" label="High"&gt;
&lt;/datalist&gt;
</pre>

<p>With styles that make the control draw vertically, it might look as follows:</p>

<p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>

</dd>

<dt>When the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute <em>is</em> specified on
Expand Down Expand Up @@ -42168,75 +42235,6 @@ ldh-str = &lt; as defined in <a href=http://tools.ietf.org/html/rfc1034#se

</div>

<!--CLEANUP--><!-- move these into the relevant subsection above -->

<div class=example>

<p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
full range of the control that are especially important, such as preconfigured light levels or
typical speed limits in a range control used as a speed control. The following markup
fragment:</p>

<pre>&lt;input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"&gt;
&lt;datalist id="powers"&gt;
&lt;option value="0"&gt;
&lt;option value="-30"&gt;
&lt;option value="30"&gt;
<span class=bad> &lt;option value="++50"&gt;</span>
&lt;/datalist&gt;
</pre>

<p>...with the following style sheet applied:</p>

<pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>

<p>...might render as:</p>

<p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
style-sheet-specified height and width properties. The colors were similarly derived from the
style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
UA deciding to only use 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 completely ignored.</p>

</div>

<div class=example>

<p>For another example, consider the following markup fragment:</p>

<pre>&lt;input name=x type=range min=100 max=700 step=9.09090909 value=509.090909&gt;</pre>

<p>A user agent could display in a variety of ways, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>

<p>Or, alternatively, for instance:</p>

<p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>

<p>The user agent could pick which one to display based on the dimensions given in the style
sheet. This would allow it to maintain the same resolution for the tick marks, despite the
differences in width.</p>

</div>

<div class=example>

<p>Finally, here is an example of a range control with two labeled values:</p>

<pre>&lt;input type="range" name="a" list="a-values"&gt;
&lt;datalist id="a-values"&gt;
&lt;option value="10" label="Low"&gt;
&lt;option value="90" label="High"&gt;
&lt;/datalist&gt;
</pre>

<p>With styles that make the control draw vertically, it might look as follows:</p>

<p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>



<h6 id="color-state-(type=color)"><span class=secno>4.10.5.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state (<code title="">type=color</code>)</h6>
Expand Down

0 comments on commit bc2f3e5

Please sign in to comment.