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">

Try it ยป

If you run the above example it will produce output something like this โ€“

MDL SLIDESRS EXAMPLE

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">

Try it ยป

If you run the above example it will produce output something like this โ€“

Material Design Lite โ€“ Sliders

Options

Following options are available in Material Design Lite Sliders Component โ€“