Search within TutorialsPark

MDL : Sliders


How to use MDL - Material Design Lite to create Sliders


Material Design Lite (MDL) : Sliders

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

Example: Material Design Lite (MDL) Slider Default Slider

Give it a TRY! » Note:The value of the input element specifies, the initial slider value.


Material Design Lite(MDL) Slider : Slider with Intial Value

A MDL slider with Initial Value is created using attribute value , default value is 50% i.e middle of the slider.

Example: Material Design Lite (MDL) Slider Slider with Initial Value

Give it a TRY! » 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