Slider 滑块
通过拖动滑块在一个固定区间内进行选择。
基础用法
最基本的滑块用法。
默认
自定义初始值
禁用状态
基础用法
带有输入框
配合 show-input 属性，可以实现数值的精确输入。
带输入框
当前数值: 15
带有输入框
垂直模式
配置 vertical 属性为 true 启用垂直模式。在垂直模式下，必须设置 height 属性。
单选: 30
范围: [
20,
50
]
垂直模式
展示标记
使用 marks 属性标记 Slider 的刻度。
滑块标记
0°C
37°C
50%
100°C
当前数值: 37
展示标记
自定义插槽
通过 thumb 插槽自定义滑块按钮，通过 mark 插槽自定义标记文本。以下是示例代码：
✨ 插槽允许您完全自定义滑块的外观，例如自定义滑块手柄 (Thumb) 或刻度标记 (Mark)。
自定义按钮
45
自定义插槽
在 Nuxt 中使用
Slider 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入。
Nuxt 中使用
SSR 注意事项：
- ✅ 基础滑动选择、范围选择完全支持
- ✅ 步长（step）、标记（marks）在服务器端正确渲染
- ✅ 垂直模式布局在 SSR 中保持一致
- ✅ 插槽（thumb/mark）支持 SSR 渲染
- ⚠️ 拖拽交互、Tooltip 提示仅在客户端激活后可用
SSR 安全性
Slider 组件针对 SSR 优化的样式系统，确保了滑块导轨和填充条在首屏加载时就具备正确的视觉效果，消除了 Hydration 时的视觉抖动。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | number | [number, number] | 0 |
| min | 最小值 | number | 0 |
| max | 最大值 | number | 100 |
| step | 步长 | number | 1 |
| size | 滑块的尺寸 | 'large' | 'default' | 'small' | 'default' |
| show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | false |
| show-input-controls | 在显示输入框时，是否显示控制按钮 | boolean | true |
| input-size | 输入框的大小 | 'large' | 'default' | 'small' | 'default' |
| show-stops | 是否显示间断点 | boolean | false |
| show-tooltip | 是否显示提示 | boolean | true |
| format-tooltip | 格式化提示文字 | (val: number) => string | number | — |
| disabled | 是否禁用 | boolean | false |
| range | 是否为范围选择 | boolean | false |
| vertical | 是否垂直模式 | boolean | false |
| height | 垂直模式下的高度 | string | — |
| label | 屏幕阅读器标签 | string | — |
| debounce | 输入时的去抖延迟，单位为毫秒 | number | 300 |
| tooltip-class | 提示的自定义类名 | string | — |
| placement | 提示出现的位置 | string | 'top' |
| marks | 标记， key 的类型必须为 number ，且在 [min, max] 范围内 | object | — |
| validate-event | 改变滑块值时是否触发表单的校验 | boolean | true |
| range-start-label | 自定义范围选择时的最小值属性名，用于 aria-label | string | — |
| range-end-label | 自定义范围选择时的最大值属性名，用于 aria-label | string | — |
| button-class | 自定义按钮类名 | string | — |
| color | 自定义主题颜色 | string | — |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 绑定值改变时触发 | (val: number | [number, number]) => void |
| change | 值改变时触发（仅在松开鼠标或点击滑道时） | (val: number | [number, number]) => void |
| input | 数据改变时触发（实时触发） | (val: number | [number, number]) => void |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| thumb | 自定义滑块手柄 | { value: number } |
| mark | 自定义刻度文本 | { mark: any } |
| default | 组件底部预留插槽 | — |
主题变量
所有颜色变量已与全局主题系统对接，自动支持暗黑模式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-slider-main-color | 主题色（滑道填充、手柄边框） | var(--yh-color-primary) |
--yh-slider-bg-color | 滑道背景颜色 | var(--yh-border-color-light) |
--yh-slider-hover-bg-color | 悬停时滑道背景颜色 | var(--yh-border-color-dark) |
--yh-slider-button-size | 手柄按钮尺寸 | 16px |
--yh-slider-button-border | 手柄按钮边框宽度 | 2px |
--yh-slider-runway-height | 滑道高度（横向为高，纵向为宽） | 6px |
--yh-slider-height | 组件整体高度（容器高度） | 32px |
--yh-slider-tooltip-bg | Tooltip 背景色 | var(--yh-bg-color-overlay-dark) |
--yh-slider-tooltip-text | Tooltip 文字颜色 | var(--yh-text-color-primary-dark) |
--yh-slider-mark-text-color | 刻度文字颜色 | var(--yh-text-color-secondary) |