滑块
在固定范围内拖动滑块。
基础用法
拖动滑块时显示当前值。
离散值
选项可以是离散的。
带输入框的滑块
通过输入框设置值。
尺寸
位置
您可以自定义工具提示的位置。
范围选择
支持选择一个值的范围。
垂直模式
显示标记
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | number / object | 0 |
| min | 最小值 | number | 0 |
| max | 最大值 | number | 100 |
| disabled | 滑块是否被禁用 | boolean | false |
| 步长 | 步长 | number | 1 |
| show-input | 是否显示输入框，仅在 range 为 false 时有效 | boolean | false |
| show-input-controls | 当 show-input 为 true 时，是否显示控制按钮 | boolean | true |
| size | 滑块包装器的大小，在垂直模式下无效 | 枚举 | default |
| input-size | 输入框的大小，当设置 size 时，默认为 size 的值 | 枚举 | default |
| show-stops | 是否显示断点 | boolean | false |
| show-tooltip | 是否显示工具提示值 | boolean | true |
| format-tooltip | 格式化要显示的工具提示值 | Function | — |
| range | 是否选择一个范围 | boolean | false |
| vertical | 垂直模式 | boolean | false |
| 高度 | 滑块高度，在垂直模式下必需 | string | — |
| aria-label a11y 2.7.2 | 原生 aria-label 属性 | string | — |
| range-start-label | 当 range 为 true 时，屏幕阅读器范围开始的标签 | string | — |
| range-end-label | 当 range 为 true 时，屏幕阅读器范围结束的标签 | string | — |
| format-value-text | 为屏幕阅读器格式化要显示的 aria-valuenow 属性 | Function | — |
| tooltip-class | 工具提示的自定义类名 | string | — |
| placement | Tooltip 的出现位置 | 枚举 | 上 |
| marks | 标记，键的类型必须是 number 并且必须在闭区间 [min, max] 内，每个标记都可以自定义样式 | object | — |
| validate-event | 是否触发表单验证 | boolean | true |
| persistent 2.9.5 | 当滑块工具提示不活动且 persistent 为 false 时，工具提示将被销毁。当 show-tooltip 为 false 时，persistent 始终为 false | boolean | true |
| label a11y 已废弃 | 原生 aria-label 属性 | string | — |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 当值改变时触发（如果鼠标正在拖动，此事件仅在鼠标松开时触发） | Function |
| input | 当数据改变时触发（在滑动过程中会实时发出） | Function |
类型声明
显示声明
ts
type SliderMarks = Record<number, string | { style: CSSProperties; label: any }>
type Arrayable<T> = T | T[]来源
贡献者
