| |
| |
| |
| <h2 id="introduction">Introduction</h2> |
| <p>The Material Design Lite (MDL) <strong>slider</strong> component is an enhanced version of the new HTML5 <code><input type="range"></code> element. A slider consists of a horizontal line upon which sits a small, movable disc (the <em>thumb</em>) and, typically, text that clearly communicates a value that will be set when the user moves it.</p> |
| <p>Sliders are a fairly new feature in user interfaces, and allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience. See the slider component's <a href="http://www.google.com/design/spec/components/sliders.html">Material Design specifications page</a> for details.</p> |
| <p>The enhanced slider component may be initially or programmatically <em>disabled</em>.</p> |
| <h3 id="to-include-an-mdl-slider-component-">To include an MDL <strong>slider</strong> component:</h3> |
| <p> 1. Code a <code><p></code> paragraph element and style it as desired. Include a CSS <code>width</code> property (directly or via a CSS class), which determines the slider's size.</p> |
| <pre><code class="lang-html"><p style="width:300px"> |
| ... |
| </p> |
| </code></pre> |
| <p> 2. Inside the paragraph container, code an <code><input></code> element and give it a <code>type</code> attribute whose value is <code>"range"</code>. Also give it an <code>id</code> attribute to make it available for scripting, and <code>min</code> and <code>max</code> attributes whose values specify the slider's range. Give it a <code>value</code> attribute whose value sets the initial thumb position (optional; if omitted, defaults to 50% of the maximum), and a <code>step</code> attribute whose value specifies the increment by which the thumb moves (also optional; if omitted, defaults to 1). Finally, give it an event handler to be executed when the user changes the slider's value.</p> |
| <pre><code class="lang-html"><p style="width:300px"> |
| <input type="range" id="s1" min="0" max="10" value="4" step="2"> |
| </p> |
| </code></pre> |
| <p> 3. Add one or more MDL classes, separated by spaces, to the slider using the <code>class</code> attribute.</p> |
| <pre><code class="lang-html"><p style="width:300px"> |
| <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2"> |
| </p> |
| </code></pre> |
| <p>The slider component is ready for use.</p> |
| <h4 id="example">Example</h4> |
| <p>A slider that controls volume.</p> |
| <pre><code class="lang-html"><p style="width:300px"> |
| <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2"> |
| </p> |
| </code></pre> |
| <h2 id="configuration-options">Configuration options</h2> |
| <p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the slider. The table below lists the available classes and their effects.</p> |
| <table> |
| <thead> |
| <tr> |
| <th>MDL class</th> |
| <th>Effect</th> |
| <th>Remarks</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><code>mdl-slider</code></td> |
| <td>Defines input element as an MDL component</td> |
| <td>Required</td> |
| </tr> |
| <tr> |
| <td><code>mdl-js-slider</code></td> |
| <td>Assigns basic MDL behavior to input element</td> |
| <td>Required</td> |
| </tr> |
| </tbody> |
| </table> |
| <blockquote> |
| <p><strong>Note:</strong> A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute <code>disabled</code>. <code><input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled></code> |
| This attribute may be added or removed programmatically via scripting.</p> |
| <p><strong>Note:</strong> Although the <em>value</em> attribute is used to set a slider's initial value, it should not be used |
| to modify the value programmatically; instead, use the MDL <code>change()</code> method. For example, assuming |
| that <em>slider1</em> is a slider object and <em>newvalue</em> is a variable containing the desired value, do not |
| use <code>slider1.value = newvalue</code>; instead, use <code>slider1.MaterialSlider.change(newvalue)</code>.</p> |
| </blockquote> |
| <h2 id="license">License</h2> |
| <p>Copyright Google, 2015. Licensed under an Apache-2 license.</p> |
| |
| |