Skip to content
On this page

Slider 滑块

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

基本用法

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

html
<wd-slider v-model="value"/>
typescript
const value = ref<number>(30)

双滑块

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

html
<wd-slider v-model="value" />
typescript
const value = ref<number[]>([10, 30])

最大值最小值

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

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

隐藏文案

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

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

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

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

禁用

设置 disabled 属性。

html
<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最小值number-0-
step步进值number-1-
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 }-

外部样式类

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

Released under the MIT License.

Released under the MIT License.