range

  • Revision slug: User:Jonathan_Watt/range
  • Revision title: range
  • Revision id: 370607
  • Created:
  • Creator: Jonathan_Watt
  • Is current revision? No
  • Comment

Revision Content

The <input type=range> support in Mozilla is a work in progress and currently subject to change. Everything on this page is subject to change.

The -moz-appearance property is currently set to 'none' in the draft support. Its value will change to 'range' once native theming is supported.

Styling of <input type=range>

The idea is that by default <input type=range> will be natively themed on the platforms that support native theming, but if the content author sets -moz-appearance to 'none' or sets any style on the input/its pseudo-elements, it will be given a CSS rendering.

When the 'type' of an <input> is set to "range", it currently provides two pseudo-elements that can be styled to enable content author styling of the component parts of the range. The tree structure of these pseudo-elements is currently as follows:

<input>
  ::-moz-range-track
  ::-moz-range-thumb

::-moz-range-track

The ::-moz-range-track pseudo-element can have its width, height, background, padding, border and margin properties set, but its positioning is handled automatically. It is positioned so that the center of its border box is positioned exactly on the center of its <input>'s content box. This behavior is designed to help content authors by automatically positioning the track correctly when the content author wants the track to be slightly bigger or smaller than the content box of the <input> (e.g. so that it extends past the edge of the thumb when the range is at 0%/100% of its value).

::-moz-range-thumb

The ::-moz-range-thumb pseudo-element can have its width, height, background, padding, border and margin properties set, but its positioning is handled automatically. It is positioned so that when the input has a value of 0% of its range the left of the thumb's border box will be against the left of the input's content box, and if the input has a value of 100% of its range the right of the thumb's border box will be against the right of the input's content box. Vertical alignment is to put the center of the thumb's border box at the center of the input's content box.

Revision Source

<div class="warning">
  <p>The &lt;input type=range&gt; support in Mozilla is a work in progress and currently subject to change. Everything on this page is subject to change.</p>
</div>
<p>The -moz-appearance property is currently set to 'none' in the draft support. Its value will change to 'range' once native theming is supported.</p>
<h2 id="Styling_of_&lt;input_type.3Drange&gt;">Styling of &lt;input type=range&gt;</h2>
<p>The idea is that by default &lt;input type=range&gt; will be natively themed on the platforms that support native theming, but if the content author sets -moz-appearance to 'none' or sets any style on the input/its pseudo-elements, it will be given a CSS rendering.</p>
<p>When the 'type' of an &lt;input&gt; is set to "range", it currently provides two pseudo-elements that can be styled to enable content author styling of the component parts of the range. The tree structure of these pseudo-elements is currently as follows:</p>
<pre>
<code>&lt;input&gt;
  ::-moz-range-track
  ::-moz-range-thumb</code></pre>
<h3 id=".3A.3A-moz-range-track">::-moz-range-track</h3>
<p>The ::-moz-range-track pseudo-element can have its width, height, background, padding, border and margin properties set, but its positioning is handled automatically. It is positioned so that the center of its border box is positioned exactly on the center of its &lt;input&gt;'s content box. This behavior is designed to help content authors by automatically positioning the track correctly when the content author wants the track to be slightly bigger or smaller than the content box of the &lt;input&gt; (e.g. so that it extends past the edge of the thumb when the range is at 0%/100% of its value).</p>
<h3 id=".3A.3A-moz-range-thumb">::-moz-range-thumb</h3>
<p>The ::-moz-range-thumb pseudo-element can have its width, height, background, padding, border and margin properties set, but its positioning is handled automatically. It is positioned so that when the input has a value of 0% of its range the left of the thumb's border box will be against the left of the input's content box, and if the input has a value of 100% of its range the right of the thumb's border box will be against the right of the input's content box. Vertical alignment is to put the center of the thumb's border box at the center of the input's content box.</p>
Revert to this revision