Slider 滑块

规则

基础示例

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

Props 配置示例

范围选择

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

显示标记

const rule = {
    type:"slider",
    field:"volume",
    title:"音量",
    value:50,
    props:{
        min: 0,
        max: 100,
        marks: {
            0: '静音',
            50: '50%',
            100: '最大',
        },
    }
}

显示输入框

const rule = {
    type:"slider",
    field:"discount",
    title:"折扣率",
    value:0.9,
    props:{
        min: 0,
        max: 1,
        step: 0.01,
        showInput: true,
    }
}

垂直滑块

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

Events 事件示例

监听滑块变化

const rule = {
    type:"slider",
    field:"volume",
    title:"音量",
    value:50,
    props:{
        min: 0,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('滑块值改变:', value);
        },
    },
}

联动更新显示值

const rule = [
    {
        type:"slider",
        field:"discount",
        title:"折扣率",
        value:0.9,
        props:{
            min: 0,
            max: 1,
            step: 0.01,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 实时显示折扣百分比
                $inject.api.setValue('discountText', (value * 100).toFixed(0) + '%');
            },
        },
    },
    {
        type:"input",
        field:"discountText",
        title:"折扣",
        props: {
            disabled: true,
        },
    },
]

完整配置项:arco-design_Slider

value :Number | Array

Props

参数名	描述	类型	默认值
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

Events

事件名	描述	参数
change	值改变时触发	value: `number