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 SliderGive 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
Material Design Lite : Slider Classes
|mdl-slider||An Input element as MDL Component.|
|mdl-js-slider||To assign MDL behaviour to MDL Slider component|