Slider 滑块

滑块用于在给定范围内选择数值，支持设置范围、步长与小数精度，可自定义类型配色与轨道背景色，也可设为禁用。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-slider 的用法，可按需组合。

<template>
  <mu-slider v-model="base"></mu-slider>
</template>

类型配色

设置已填充轨道的颜色，可选内置语义色。

<mu-slider v-model="cPrimary" type="primary"></mu-slider>
<mu-slider v-model="cSuccess" type="success"></mu-slider>
<mu-slider v-model="cWarning" type="warning"></mu-slider>
<mu-slider v-model="cError" type="error"></mu-slider>
<mu-slider v-model="cDanger" type="danger"></mu-slider>
<mu-slider v-model="cInfo" type="info"></mu-slider>

自定义颜色

type 传入内置语义色以外的值时，会作为颜色值使用。

<mu-slider v-model="cCustom" type="#8B5CF6"></mu-slider>

轨道背景色

设置未填充轨道的背景色，可使用主题变量或任意合法颜色。

<mu-slider v-model="bgVal" type="primary" bg-color="#E5E9F5"></mu-slider>

范围与步长

设置取值的最小值、最大值与步长。

<mu-slider v-model="rangeVal" :min="0" :max="10" :step="2" type="success"></mu-slider>

小数精度

设置保留的小数位数，配合小数步长使用。

<mu-slider v-model="floatVal" :min="0" :max="5" :step="0.5" :precision="1" type="warning"></mu-slider>

禁用

开启后滑块不可拖动。

<mu-slider v-model="disabledVal" :disabled="true"></mu-slider>

事件

拖动过程中触发 changing，松手时触发 change。

<mu-slider v-model="eventVal" type="primary" @changing="onChanging" @change="onChange"></mu-slider>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
v-model	绑定值（当前进度值）	number	0
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
precision	小数精度，大于 0 时保留对应位数	number	0
disabled	是否禁用	boolean	false
type	已填充轨道颜色，可选 primary、success、warning、error、danger、info，也可直接传入颜色值	string	primary
bgColor	未填充轨道背景色	string	-
customClass	自定义类名，附加在滑块根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于滑块根节点	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
changing	拖动过程中触发	value: number
change	拖动结束（松手）时触发	value: number

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：通过 v-model 绑定当前值，拖动过程中持续触发 changing，松手时只触发一次 change。
• 使用注意：取值会按 step 就近吸附并限制在 min 至 max 之间。
• 使用注意：点击轨道任意位置即会跳转取值，并非只能拖动滑块。