Material Design Lite – Sliders
Material Design Lite – Sliders : Material Design Lite(MDL) Slider Component is the basically upgraded version of the HTML5 input range element. Slider contains a horizontal line and a movable disc placed over it which can be moved to set the value. Here in this tutorial we are going to explain how you can create sliders in Material Design Lite(MDL). You can use our online editor to edit and run the code online.
Material Design Lite – Sliders | MDL | Example
Let us go step by step to create sliders.
Default Slider
Classs mdl-slider and mdl-js-slider is used to create the default slider. Here is an example of default slider –
Material Design Lite – Sliders: Example
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0"> |
If you run the above example it will produce output something like this –
Slider With Starting Value
If you want to assign some value to the slider you can use value attribute to assign the value. Here is an example of default slider –
Material Design Lite – Sliders: Example
<input class="mdl-slider mdl-js-slider" type="range" value="50" min="0" max="100" value="0" tabindex="0"> |
If you run the above example it will produce output something like this –
Options
Following options are available in Material Design Lite Sliders Component –
- mdl-slider(Required) This is used to define the input element as an MDL component.
- mdl-js-slider(Required) This is used to assign the basic MDL behavior to input element.
- 1. Material Design Lite - Checkbox
- 2. Material Design Lite - Radio Button
- 3. Material Design Lite - Icon Toggle
- 4. Material Design Lite - Switch
- 5. Material Design Lite - Tooltips
Advertisements
