Slider 滑块
规则
滑块
js
{
type: 'slider',
title: '滑块',
field: 'slider',
value: 50,
props: {
disabled: false,
}
}
双滑块
js
{
type: 'slider',
title: '双滑块',
field: 'slider2',
value: [30, 70],
props: {
range: true,
}
}
参考:Vant_Slider
value :Number | Array
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
max | 最大值 | number | string | 100 |
min | 最小值 | number | string | 0 |
step | 步长 | number | string | 1 |
bar-height | 进度条高度,默认单位为 px | number | string | 2px |
button-size | 滑块按钮大小,默认单位为 px | number | string | 24px |
active-color | 进度条激活态颜色 | string | #1989fa |
inactive-color | 进度条非激活态颜色 | string | #e5e5e5 |
range | 是否开启双滑块模式 | boolean | false |
reverse | 是否将进度条反转 | boolean | false |
disabled | 是否禁用滑块 | boolean | false |
readonly | 是否为只读状态,只读状态下无法修改滑块的值 | boolean | false |
vertical | 是否垂直展示 | boolean | false |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 进度变化且结束拖动后触发 | value: number |
drag-start | 开始拖动时触发 | event: TouchEvent |
drag-end | 结束拖动时触发 | event: TouchEvent |