Slider
mdui's sliders are implemented using the HTML5 <input type="range" /> input box.
Usage
The slider component is automatically initialized after the page is loaded. For dynamically generated sliders, you need to call mdui.mutation() for initialization.
Color
Use the accent color.
Related Reading
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100"/>
</label><label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100"/>
</label>Disabled state
Add the disabled attribute to the input element of a continuous or discrete slider to disable the slider.
Continuous slider:
<!-- Default value is 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Default value is not 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Discrete slider:
<!-- Default value is 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Default value is not 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Dynamically generated slider
If your slider component is dynamically generated, you need to call mdui.mutation() for initialization.
If you dynamically modify the value of the slider, you need to call the mdui.updateSliders() method to reinitialize the slider component. This method accepts a parameter, which can be a CSS selector containing the .mdui-slider class, a DOM element, or an array of DOM elements, specifying the sliders to be reinitialized. If no parameter is passed, all sliders on the page will be reinitialized.