Skip to content

Slider 滑块

规则

基础示例

Props 配置示例

单值滑块

范围滑块

显示间断点

垂直滑块

自定义标记

禁用

Events 事件示例

监听滑块变化

范围变化后更新显示

完整配置项:Element_Slider

value :Number | Array

Props

属性名描述类型默认
min最小值number0
max最大值number100
disabled是否禁用booleanfalse
step步长number1
showInput是否显示输入框,仅在非范围选择时有效booleanfalse
showInputControls在显示输入框的情况下,是否显示输入框的控制按钮booleantrue
sizeslider 包装器的大小,垂直模式下该属性不可用enumdefault
inputSize输入框的大小,如果设置了 size 属性,默认值自动取 sizeenumdefault
showStops是否显示间断点booleanfalse
showTooltip是否显示提示信息booleantrue
formatTooltip格式化提示信息Function
range是否开启选择范围booleanfalse
vertical垂直模式booleanfalse
height滑块高度,垂直模式必填string
ariaLabel原生 aria-label属性string
rangeStartLabelrange 为true时,屏幕阅读器标签开始的标记string
rangeEndLabelrange 为true时,屏幕阅读器标签结尾的标记string
formatValueText显示屏幕阅读器的 aria-valuenow 属性的格式Function
debounce输入时的去抖延迟,毫秒,仅在 show-input 等于 true 时有效number300
tooltipClasstooltip 的自定义类名string
placementTooltip 出现的位置enumtop
marks标记, key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标记可以单独设置样式object
validateEvent输入时是否触发表单的校验booleantrue
persistent当 slider 的 tooltip 处于非活动状态且 persistentfalse 时,Popconfirm 将被销毁。 当 show-tooltipfalse 时,persistent 将始终为 falsebooleantrue

Events

事件名说明类型
change值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发)Function
input数据改变时触发(使用鼠标拖曳时,活动过程实时触发)Function

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用