基于 Material Design 3 和 Web Components 的全新 mdui 2 现已发布，前往查看 mdui 2 开发文档。

滑块

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>

禁用状态

在连续滑块或间续滑块的 input 元素上添加 disabled 属性即可禁用滑块。

连续滑块：

示例

<!-- 默认值为 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 元素数组，用于指定要重新初始化的滑块。如果不传入参数，则重新初始化页面中的所有滑块。

CSS 类名列表

类名	说明
`.mdui-slider`	定义滑块组件。
`.mdui-slider-discrete`	定义间续滑块。

选择控件

列表

滑块