Slider 滑块

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

基础用法

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

离散值

选项可以是离散的

带有输入框的滑块

通过输入框设置精确数值

不同尺寸

位置

您可以自定义 Tooltip 提示的位置。

范围选择

支持选择某一数值范围

垂直模式

显示标记

属性

属性描述类型可选值默认值
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
placementTooltip 出现的位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endtop
marks标记, 对象的键类型需为 number 且对象的值必须在 [min, max]闭区间内,每个标记均可自定义样式object
validate-event输入时是否触发表单的校验boolean-true

事件

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

源代码

组件文档

贡献者