Slider 滑块

支持单向滑块和双向滑块。

基本用法

v-model 为绑定值。如果为 number 类型则显示一个滑块，如果为 array 类型则显示两个滑块。

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

const value = ref<number>(30)

双滑块

双滑块模式下 value 为 二元数组 类型。

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

const value = ref<number[]>([10, 30])

最大值最小值

设置 min 最小值，min 最大值。

<wd-slider v-model="value" :min="4" :max="1000" />

隐藏文案

设置 hide-label 隐藏滑块当前值。

<wd-slider v-model="value" hide-label/>

设置 hide-min-max 隐藏最大最小值。

<wd-slider v-model="value" hide-min-max />

禁用

设置 disabled 属性。

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

Attributes

参数	说明	类型	可选值	默认值	最低版本
v-model	滑块值，如果为array，则为双向滑块	number / array	-	-	-
hide-min-max	是否显示左右的最大最小值	boolean	-	false	-
hide-label	是否显示当前滑块值	boolean	-	false	-
disabled	是否禁用	boolean	-	false	-
max	最大值	number	-	100	-
min	最小值，允许负数(1.2.19)	number	-	0	-
step	步进值	number	-	1	1.2.19
active-color	进度条激活背景颜色	string	-	linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%)	-
inactive-color	进度条未激活背景颜色	string	-	#e5e5e5	-

Events

事件名称	说明	参数	最低版本
dragstart	开始移动时触发	{ value }	-
dragmove	移动滑块时触发	{ value }	-
dragend	移动结束时触发	{ value }	-

Methods

对外暴露函数

事件名称	说明	参数	最低版本
initSlider	初始化slider宽度数据	-	1.2.25

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-
custom-min-class	最小值自定义样式	-
custom-max-class	最大值自定义样式	-

源代码

文档

• 组件