Slider 滑块

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

基础用法

在拖动滑块时，显示当前值。

离散值

选项可以是离散的。

带有输入框

通过输入框设置精确数值。 (需要配合 Input 组件使用，此处仅演示 Slider)

范围选择

支持选择某一数值范围。

竖向模式

展示标记

✨ 炫彩模式 (Unique)

开启 rainbow 属性，滑块条将展示动态流动的彩虹渐变效果。

💧 液体/粘滞效果 (Unique)

开启 gooey 属性，滑块按钮和进度条之间会产生粘滞（Gooey）的融合效果，提供独特的视觉反馈。建议配合较宽的 Slider 体验。

🔊 声音反馈 (Unique)

开启 sound 属性，当点击或拖动结束时，会播放轻微的机械音效，提供触觉反馈。

API

Slider 属性

属性名	说明	类型	默认值
model-value / v-model	绑定值	number / number[]	0
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
show-stops	是否显示间断点	boolean	false
disabled	是否禁用	boolean	false
show-tooltip	是否显示 tooltip	boolean	true
format-tooltip	格式化 tooltip message	(val: number) => number | string	—
range	是否开启选择范围	boolean	false
vertical	是否竖向模式	boolean	false
height	Slider 高度，竖向模式必填	string	'200px'
marks	标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式	object	—
rainbow	是否开启炫彩模式	boolean	false
gooey	是否开启液体粘滞效果	boolean	false
sound	是否开启声音反馈	boolean	false

Slider 事件

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