搜索组件...⌘K

Slider 滑动输入条

用于在给定范围内选择一个值或范围，支持标记、提示气泡、双滑块和竖直方向。

基础用法

通过 v-model 绑定数值：

值：50

设置范围与步长

通过 min、max 设置范围，step 设置步长：

值：20

带提示

设置 show-tooltip 拖动时显示数值提示：

自定义提示格式

通过 format-tooltip 格式化提示文字：

带标记

通过 marks 在轨道下方显示刻度标记：

0°C25°C50°C75°C100°C

双滑块范围选择

设置 range 开启双滑块模式，v-model 绑定 [start, end]：

范围：20 - 80

竖直方向

设置 vertical 使滑块竖直显示：

带输入框

设置 input 在滑块旁显示数字输入框：

不同尺寸

设置 size 为 sm / md / lg：

禁用状态

设置 disabled 禁用滑块：

Props

参数	类型	默认值	说明
`modelValue`	`number \| [number, number]`	`-`	当前值（v-model），range 模式为 [start, end]
`min`	`number`	`0`	最小值
`max`	`number`	`100`	最大值
`step`	`number`	`1`	步长
`disabled`	`boolean`	`false`	是否禁用
`showTooltip`	`boolean`	`false`	是否显示拖拽提示
`marks`	`Record<number, string>`	`-`	刻度标记
`range`	`boolean`	`false`	是否双滑块范围选择
`vertical`	`boolean`	`false`	是否竖直方向
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`formatTooltip`	`(val: number) => string \| number`	`-`	格式化提示文字
`input`	`boolean`	`false`	是否显示数值输入框（仅单滑块）

Events

事件名	类型	说明
`update:modelValue`	`(val: number \| [number, number]) => void`	值变化时触发
`change`	`(val: number \| [number, number]) => void`	拖拽结束时触发