Material Design Lite Slider
what is slider in (MDL) ?
- Material Design Lite(MDL) component slider component is used to create similar to HTML5 range-sliders, but a bit enhanced version of the same.
- The Visual Appearance of the slider is a horizontal line with a small circular disk on it which can be moved to change the value of the slider.
- The Range of Values that can be selected is predefined by the developer, moving the thumb of the slider to the left decreases the value while moving it to right increases the value
- The Design , usage and placement of the Sliders has a very significant effect on the User Experience.
Material Design Lite(MDL) Slider : Default Slider
- A MDL Slider can be created using mdl-slider to create a container to hold menu slider related content
- A Range slider is created by using the type="range", the limits are set using max and min
<!-- MDL input slider using class "mdl-slider" -->
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0"/>
Note:The value of the input element specifies, the initial slider value.
Material Design Lite : Slider Classes
- A MDL slider with Initial Value is created using attribute value , default value is 50% i.e middle of the slider.
<!-- MDL input slider using class "mdl-slider" -->
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="34" tabindex="0"/>
<!-- Initial value="34" --></div>
Note:If nothing is specified, the of the slider is 50%
Material Design Lite : Slider Classes
| MDL Class | Description |
|---|---|
| mdl-slider | An Input element as MDL Component. |
| mdl-js-slider | To assign MDL behaviour to MDL Slider component |
Sample Code
- The following example showcases the use of mdl-slider classes to show different types of sliders.
<html>
<head>
<scriptsrc="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<linkrel="stylesheet"href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons">
<scriptlangauage="javascript">
functionshowMessage(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><inputid="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><inputid="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><inputid="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: <divid="message">25</div>
</body>
</html>