Slider 滑块

滑块组件用于在数值区间内进行选择。

何时使用

当用户需要在数值区间内进行选择时
当需要调整设置值时，如音量、亮度等
当需要选择范围值时

基本用法

基本的滑块用法。

范围选择

支持选择数值范围。

垂直模式

垂直方向的滑块。

步长

设置步长，取值必须大于 0，并且可被 (max - min) 整除。

显示间断点

使用 show-stops 属性可以显示间断点。

带标记

使用 marks 属性可以显示标记。

带输入框

通过设置 show-input 属性可以显示输入框。支持单值模式和范围模式。

单值模式

范围模式

通过 tips-renderer 属性可以定制 Tooltip 显示内容，设置 show-tooltip="false" 可以隐藏 Tooltip。

通过 placement 属性可以设置 Tooltip 的显示位置。

尺寸变体

Slider 提供三种尺寸：large、default、small。

禁用状态

通过设置 disabled 属性来禁用滑块。

无障碍访问

Slider 组件支持完整的无障碍访问功能。

API

Slider Props

参数	说明	类型	可选值	默认值
model-value / v-model	绑定值	number / number[]	—	0
min	最小值	number	—	0
max	最大值	number	—	100
disabled	是否禁用	boolean	—	false
step	步长	number	—	1
show-input	是否显示输入框，支持单值模式和范围模式	boolean	—	false
show-input-controls	在显示输入框的情况下，是否显示输入框的控制按钮	boolean	—	true
input-size	输入框的尺寸	string	large / default / small	default
show-stops	是否显示间断点	boolean	—	false
show-tooltip	是否显示 tooltip	boolean	—	true
format-tooltip	格式化 tooltip message	function(value)	—	—
tips-renderer	自定义 tooltip 内容	function(value) / null	—	—
placement	Tooltip 显示位置	string	top / right / bottom / left	top
range	是否为范围选择	boolean	—	false
vertical	是否竖向模式	boolean	—	false
height	Slider 高度，竖向模式时必填	string	—	200px
size	Slider 尺寸	string	large / default / small	default
label	屏幕阅读器标签	string	—	—
aria-label	无障碍标签	string	—	—
range-start-label	范围选择起始标签	string	—	—
range-end-label	范围选择结束标签	string	—	—
format-value-text	格式化值文本用于无障碍访问	function(value)	—	—
tooltip-class	tooltip 的自定义类名	string	—	—
marks	标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式	object	—	—
validate-event	是否触发表单验证	boolean	—	true
persistent	是否持久化显示 tooltip	boolean	—	true
show-default-tooltip	是否显示默认 tooltip（当 tipsRenderer 为 null 时）	boolean	—	false
precision	数值精度	number	—	—

Slider Events

事件名	说明	回调参数
change	值改变时触发（使用鼠标拖拽时，只在松开鼠标后触发）	改变后的值
input	数据改变时触发（使用鼠标拖拽时，活动过程实时触发）	改变后的值

Slider 滑块 ​

何时使用 ​

基本用法 ​

范围选择 ​

垂直模式 ​

步长 ​

显示间断点 ​

带标记 ​

带输入框 ​

单值模式 ​

范围模式 ​

定制 Tooltip 显示内容 ​

Tooltip 位置 ​

尺寸变体 ​

禁用状态 ​

无障碍访问 ​

API ​

Slider Props ​

Slider Events ​