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,
        showInput: true,
    }
}

范围滑块

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

显示间断点

const rule = {
    type:"slider",
    field:"discount",
    title:"折扣率",
    value:0.5,
    props:{
        min: 0,
        max: 1,
        step: 0.1,
        showStops: true,
        showInput: true,
        formatTooltip: (val) => {
            return (val * 100).toFixed(0) + '%';
        },
    }
}

垂直滑块

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

自定义标记

const rule = {
    type:"slider",
    field:"score",
    title:"评分",
    value:60,
    props:{
        min: 0,
        max: 100,
        marks: {
            0: '0分',
            25: '25分',
            50: '50分',
            75: '75分',
            100: '100分'
        },
    }
}

Events 事件示例

监听滑块变化

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

范围变化后更新显示

const rule = [
    {
        type:"slider",
        field:"priceRange",
        title:"价格区间",
        value:[0,100],
        props:{
            min: 0,
            max: 1000,
            range: true,
            showInput: 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,
        },
    },
]

完整配置项:Element_Slider

value :Number | Array

Props

属性名	描述	类型	默认
min	最小值	number	0
max	最大值	number	100
disabled	是否禁用	boolean	false
step	步长	number	1
showInput	是否显示输入框，仅在非范围选择时有效	boolean	false
showInputControls	在显示输入框的情况下，是否显示输入框的控制按钮	boolean	true
size	slider 包装器的大小，垂直模式下该属性不可用	enum	default
inputSize	输入框的大小，如果设置了 size 属性，默认值自动取 size	enum	default
showStops	是否显示间断点	boolean	false
showTooltip	是否显示提示信息	boolean	true
formatTooltip	格式化提示信息	Function	—
range	是否开启选择范围	boolean	false
vertical	垂直模式	boolean	false
height	滑块高度，垂直模式必填	string	—
ariaLabel	原生 aria-label属性	string	—
rangeStartLabel	当 range 为true时，屏幕阅读器标签开始的标记	string	—
rangeEndLabel	当 range 为true时，屏幕阅读器标签结尾的标记	string	—
formatValueText	显示屏幕阅读器的 aria-valuenow 属性的格式	Function	—
debounce	输入时的去抖延迟，毫秒，仅在 show-input 等于 true 时有效	number	300
tooltipClass	tooltip 的自定义类名	string	—
placement	Tooltip 出现的位置	enum	top
marks	标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式	object	—
validateEvent	输入时是否触发表单的校验	boolean	true
persistent	当 slider 的 tooltip 处于非活动状态且 persistent 为 false 时，Popconfirm 将被销毁。 当 show-tooltip 为 false 时，persistent 将始终为 false。	boolean	true

Events

事件名	说明	类型
change	值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）	Function
input	数据改变时触发（使用鼠标拖曳时，活动过程实时触发）	Function