滑动输入条 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] |