Slider 滑块

滑动输入条，用于在给定的范围内选择一个值。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定当前值。

<zq-slider v-model="value" />

const value = ref(50)

自定义范围

通过 min 和 max 属性设置取值范围。

<zq-slider v-model="value" :min="0" :max="200" />

自定义步长

通过 step 属性设置步长。

<zq-slider v-model="value" :step="10" />

禁用状态

通过 disabled 属性禁用滑块。

<zq-slider v-model="value" disabled />

自定义颜色

通过 active-color 和 inactive-color 属性自定义滑块颜色。

<zq-slider v-model="value" active-color="#ee0a24" />

显示当前值

通过 show-value 属性在滑块右侧显示当前值。

<zq-slider v-model="value" show-value />

API

Props

参数	说明	类型	默认值
v-model	当前值	number	0
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
disabled	是否禁用	boolean	false
active-color	已选择部分的颜色	string	''（默认使用 --color-primary）
inactive-color	未选择部分的颜色	string	''（默认使用 --color-bg-input）
show-value	是否显示当前值	boolean	false

Events

事件名	说明	回调参数
update:modelValue	拖动过程中实时触发	value: number
change	拖动结束或点击时触发	value: number
drag-start	开始拖动时触发	-
drag-end	结束拖动时触发	-

注意事项

• 支持触摸拖动和点击定位两种交互方式。
• 值会自动按照 step 步长取整。
• 值会被限制在 [min, max] 范围内。

主题定制

变量名	说明
--color-primary	已选择部分默认颜色
--color-bg-input	未选择部分默认颜色
--color-text-secondary	数值文字颜色