Slider

Rules

Basic Example

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

Props Configuration Examples

Range Selection

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

Show Marks

const rule = {
    type:"slider",
    field:"volume",
    title:"Volume",
    value:50,
    props:{
        min: 0,
        max: 100,
        marks: {
            0: 'Mute',
            50: '50%',
            100: 'Max',
        },
    }
}

Show Input Box

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

Vertical Slider

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

Events Examples

Handle Slider Changes

const rule = {
    type:"slider",
    field:"volume",
    title:"Volume",
    value:50,
    props:{
        min: 0,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('Slider value changed:', value);
        },
    },
}

Linkage Update Display Value

const rule = [
    {
        type:"slider",
        field:"discount",
        title:"Discount Rate",
        value:0.9,
        props:{
            min: 0,
            max: 1,
            step: 0.01,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Display discount percentage
                $inject.api.setValue('discountText', (value * 100).toFixed(0) + '%');
            },
        },
    },
    {
        type:"input",
        field:"discountText",
        title:"Discount",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_Slider

value: Number | Array

Props

Parameter	Description	Type	Default
step	Step size for sliding	number	1
min	Minimum value of sliding range	number	0
marks	Set displayed labels	Record<number, string>	-
max	Maximum value of sliding range	number	100
direction	Direction of slider	Direction	'horizontal'
disabled	Whether disabled	boolean	false
show-ticks	Whether to show tick marks	boolean	false
show-input	Whether to show input box	boolean	false
range	Whether to enable range selection	boolean	false

Events

Event Name	Description	Parameters
change	Triggered when value changes	value: `number