Slider 滑块

规则

基础示例

const rule = {
    type: 'slider',
    title: '滑块',
    field: 'slider',
    value: 50,
    props: {
        disabled: false,
    }
}

Props 配置示例

单值滑块

const rule = {
    type: 'slider',
    title: '音量',
    field: 'volume',
    value: 50,
    props: {
        min: 0,
        max: 100,
        step: 1,
    }
}

双滑块（范围选择）

const rule = {
    type: 'slider',
    title: '价格区间',
    field: 'priceRange',
    value: [30, 70],
    props: {
        range: true,
        min: 0,
        max: 1000,
    }
}

自定义颜色

const rule = {
    type: 'slider',
    title: '音量',
    field: 'volume',
    value: 50,
    props: {
        activeColor: '#07c160',
        inactiveColor: '#ebedf0',
    }
}

垂直滑块

const rule = {
    type: 'slider',
    title: '高度',
    field: 'height',
    value: 50,
    props: {
        vertical: true,
        min: 0,
        max: 100,
    }
}

Events 事件示例

监听滑块变化

const rule = {
    type: 'slider',
    title: '音量',
    field: 'volume',
    value: 50,
    props: {
        min: 0,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('值改变（拖拽结束）:', value);
        },
        'drag-start': (event) => {
            console.log('开始拖动:', event);
        },
        'drag-end': (event) => {
            console.log('结束拖动:', event);
        },
    },
}

范围变化后更新显示

const rule = [
    {
        type: 'slider',
        title: '价格区间',
        field: 'priceRange',
        value: [0, 100],
        props: {
            min: 0,
            max: 1000,
            range: true,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 更新价格区间显示
                const [min, max] = value;
                $inject.api.setValue('priceRangeText', `¥${min} - ¥${max}`);
            },
        },
    },
    {
        type: 'input',
        field: 'priceRangeText',
        title: '价格区间',
        props: {
            disabled: 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