TUI

Slider 滑块
通过滑动改变数值的组件,支持水平/垂直、圆角、小球、百分比模式等多种配置。
基础用法
通过 v-model 绑定数值,默认水平滑动。
Default Value
No Round Value
Disabled Value
示例代码
vue
垂直模式
支持垂直方向滑动。
当前值:50
示例代码
vue
最大最小值
可通过 max 和 min 属性设置范围。
min:10, max:80, 默认值:30 当前值:30
示例代码
vue
范围选择
通过 range 设置范围。
min:10, max:80, 默认值:30 当前值:[ 30, 40 ]
示例代码
vue
radius 圆角属性
默认值:30 当前值:30
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
modelValue
绑定的值
number
0 ~ max 或 0 ~ 100
-
value
当前值, 受控
number
0 ~ max 或 0 ~ 100
-
新增 0.3.7
min
最小值
number
-
0
max
最大值
number
-
100
radius
滑块radius
number
value
added 0.5.7
ball
是否显示滑块小球
boolean
true / false
true
vertical
是否垂直滑动
boolean
true / false
false
decimals
小数位数
number
-
2
bg
背景颜色
string
-
mode
显示模式,可选数值或百分比
string
value / percent
value
deprecated 0.3.7
round
是否圆角
boolean
true / false
true
deprecated 0.5.7
事件 Events
事件名
说明
回调参数
版本说明
change
值变化时触发
(value: number) => void
基础用法
垂直模式
最大最小值
范围选择
radius 圆角属性
属性 Props
事件 Events