Slider 滑块
用于在一个固定区间内进行数值选择的组件
参数
Props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| modelValue | number | [number, number] | - | 滑块的值 |
| min | number | 0 | 最小值 |
| max | number | 100 | 最大值 |
| step | number | 1 | 步长 |
| showButtons | boolean | false | 是否显示步进按钮 |
| showTicks | boolean | false | 是否显示刻度 |
| showValue | boolean | false | 是否显示数值 |
| vertical | boolean | false | 是否垂直显示 |
| disabled | boolean | false | 是否禁用 |
| size | ComponentSize | 'medium' | 组件尺寸 |
| type | ComponentType | 'default' | 组件类型 |
Slots
| 名称 | 描述 | 参数 |
|---|---|---|
| button | 自定义滑块按钮 | - |
| increase | 自定义增加按钮 | - |
| decrease | 自定义减少按钮 | - |
| value | 自定义数值显示 | { value: number } |
Events
| 名称 | 描述 | 参数 |
|---|---|---|
| update:modelValue | 值变化时触发 | (value: number | [number, number]) => void |
| change | 值改变时触发 | (value: number | [number, number]) => void |
| input | 值输入时触发 | (value: number | [number, number]) => void |
| drag-end | 拖拽结束时触发 | () => void |
示例
基础用法
显示数值
步进按钮
刻度标记
不同尺寸
不同类型
垂直方向
自定义范围
自定义步长
禁用状态
自定义按钮
自定义步进按钮
区间选择
自动排序
TypeScript
ts
// 基础颜色类型
export type ComponentType =
| "default"
| "primary"
| "secondary"
| "success"
| "warning"
| "error"
| "info";
// 组件尺寸
export type ComponentSize = "small" | "medium" | "large";