滑动输入条 Slider
滑动输入条的基本用法。
禁用滑动输入条。
当设置 show-input 时,将显示输入框。
添加文本标签
Section titled “添加文本标签”通过设置 marks 可以添加文本标签。
通过设置 range 可开启范围选择,此时 modelValue 为数组。
通过 step 设置步长,默认步长为 1。建议设置能够被 max-min 整除的值,否则会出现可选最大值小于 max 的情况。当设置 show-ticks 时,显示步长刻度线。
通过设置 format-tooltip 可以自定义提示文字。
设置 direction="vertical" ,将会显示竖直的滑动条。
<slider> Props
Section titled “<slider> Props”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| model-value (v-model) | 绑定值 | number | [number, number] |
- |
|
| default-value | 默认值(非受控状态) | number | [number, number] |
0 |
|
| step | 滑动的步长 | number |
1 |
|
| min | 滑动范围的最小值 | number |
0 |
|
| marks | 设置显示的标签 | Record<number, string> |
- |
|
| max | 滑动范围的最大值 | number |
100 |
|
| direction | 滑动输入条的方向 | Direction |
'horizontal' |
|
| disabled | 是否禁用 | boolean |
false |
|
| show-ticks | 是否显示刻度线 | boolean |
false |
|
| show-input | 是否显示输入框 | boolean |
false |
|
| range | 是否开启范围选择 | boolean |
false |
|
| show-tooltip | 是否显示tooltip | boolean |
true |
2.42.0 |
<slider> Events
Section titled “<slider> Events”| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 值改变时触发 | value: number | [number, number] |