MDUI 的滑块使用 HTML5 的 <input type="range" />
输入框实现。
滑块组件在页面加载完后会自动初始化。对于动态生成的滑块,需要调用 mdui.mutation()
进行初始化。
使用强调色。
<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>
<!-- 默认值为 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- 默认值不为 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>
间续滑块:
<!-- 默认值为 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- 默认值不为 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>
如果你的滑块组件是动态生成的,则需要调用 mdui.mutation()
进行初始化。
如果你动态修改了滑块的值,则需要调用 mdui.updateSliders()
方法来重新初始化滑块组件。该方法可以接受一个含 .mdui-slider
类的 CSS 选择器、或者 DOM 元素、或者 DOM 元素组成的数组作为参数,表示只重新初始化指定滑块。如果没有传入参数,将重新初始化页面中的所有滑块。