The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the display various types of menu.
The below table mentions the available classes and their effects.
mdl_sliders.htm
| S.N. | Class Name & Description |
|---|---|
| 1 | mdl-slider Identifies input element as an MDL component and is required. |
| 2 | mdl-js-slider Sets basic MDL behavior to input element and is required |
Example
The following example showcases the use of mdl-slider classes to show different types of sliders.mdl_sliders.htm
<html> <head> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script langauage="javascript"> function showMessage(value){ document.getElementById("message").innerHTML = value; } </script> </head> <body> <table> <tr><td>Default Slider</td><td>Slider with initial value</td><td>Disabled Slider</td></tr> <tr><td><input id="slider1" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0" oninput="showMessage(this.value)" onchange="showMessage(this.value)" ></td> <td><input id="slider2" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0" oninput="showMessage(this.value)" onchange="showMessage(this.value)"></td> <td><input id="slider3" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0" step="2" disabled oninput="showMessage(this.value)" onchange="showMessage(this.value)"></td> </tr> </table> Value: <div id="message" >25</div> </body> </html>
No comments:
Post a Comment