Slider 滑块

通过拖动滑块在一个固定区间内进行选择

基础用法

在拖动滑块时,显示当前值

离散值

选项可以是离散的

带有输入框的滑块

通过输入框设置精确数值

不同尺寸

范围选择

支持选择某一数值范围

垂直模式

显示标记

属性

属性描述类型可选值默认值
model-value / v-model选中项绑定值number0
min最小值number0
max最大值number100
disabled是否禁用booleanfalse
step步长number1
show-input是否显示输入框,仅在非范围选择时有效booleanfalse
show-input-controls在显示输入框的情况下,是否显示输入框的控制按钮booleantrue
size滑块的大小stringlarge / default / smalldefault
input-size输入框的大小,如果设置了 size 属性,默认值自动取 sizestringlarge / default / smalldefault
show-stops是否显示间断点booleanfalse
show-tooltip是否显示提示信息booleantrue
format-tooltip格式化提示信息function(value)
range是否开启选择范围booleanfalse
vertical垂直模式booleanfalse
height滑块高度,垂直模式必填string
label屏幕阅读器标签string
range-start-labelrange 为true时,屏幕阅读器标签开始的标记string
range-end-labelrange 为true时,屏幕阅读器标签结尾的标记string
format-value-text显示屏幕阅读器的 aria-valuenow 属性的格式function(value)
debounce输入时的去抖延迟,毫秒,仅在 show-input 等于 true 时有效number300
tooltip-classtooltip 的自定义类名string
marks标记, key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标记可以单独设置样式object

事件

事件名说明参数
change值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发)val,新状态的值
input数据改变时触发(使用鼠标拖曳时,活动过程实时触发)val,改变后的值

源代码

组件文档

贡献者