Slider 滑块

规则

基础示例

const rule = {
    type:"slider",
    field:"slider",
    title:"滑块",
    value:[0,52],
    props:{
        min: 0,
        max: 100,
        range: true,
    }
}

Props 配置示例

单值滑块

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

范围滑块

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

显示刻度

const rule = {
    type:"slider",
    field:"discount",
    title:"折扣率",
    value:0.5,
    props:{
        min: 0,
        max: 1,
        step: 0.1,
        dots: true,
        marks: {
            0: '0%',
            0.5: '50%',
            1: '100%'
        },
    }
}

垂直滑块

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

Events 事件示例

监听滑块变化

const rule = {
    type:"slider",
    field:"volume",
    title:"音量",
    value:50,
    props:{
        min: 0,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('值改变（拖拽中）:', value);
        },
        afterChange: (value) => {
            console.log('值改变（拖拽结束）:', value);
        },
    },
}

范围变化后更新显示

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

完整配置项:Vue-design-vue_Slider

value :Number | Array

Props

参数	说明	类型	默认值
autofocus	自动获取焦点	boolean	false
disabled	值为 true 时，滑块为禁用状态	boolean	false
dots	是否只能拖拽到刻度上	boolean	false
included	marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列	boolean	true
mark	自定义刻度标记	v-slot:mark	{ point: number, label: any }
marks	刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式	object	{ number : string|VNode } or { number: { style: object, label: string|VNode } } or { number: () => VNode }
max	最大值	number	100
min	最小值	number	0
range	双滑块模式	boolean	false
reverse	反向坐标轴	boolean	false
step	步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。	number|null	1
vertical	值为 true 时，Slider 为垂直方向	Boolean	false
tipFormatter	Slider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值，若为 null，则隐藏 Tooltip。	Function|null	IDENTITY
tooltipPlacement	设置 Tooltip 展示位置。参考 Tooltip。	string
tooltipOpen	值为true时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。	Boolean
getTooltipPopupContainer	Tooltip 渲染父节点，默认渲染到 body 上。	Function	() => document.body

Events

事件名称	说明	回调参数
change	当 Slider 的值发生改变时，会触发 change 事件，并把改变后的值作为参数传入。	Function(value)
afterChange	与 mouseup 触发时机一致，把当前值作为参数传入。	Function(value)