Slider 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

Single Value Slider

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

Range Slider

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

Show Stops

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

Vertical Slider

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

Custom Marks

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

Events Examples

Listen to Slider Changes

const rule = {
    type:"slider",
    field:"volume",
    title:"Volume",
    value:50,
    props:{
        min: 0,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('Value changed (after drag end):', value);
        },
        input: (value) => {
            console.log('Value changed (real-time):', value);
        },
    },
}

Update Display After Range Changes

const rule = [
    {
        type:"slider",
        field:"priceRange",
        title:"Price Range",
        value:[0,100],
        props:{
            min: 0,
            max: 1000,
            range: true,
            showInput: true,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Update price range display
                const [min, max] = value;
                $inject.api.setValue('priceRangeText', `¥${min} - ¥${max}`);
            },
        },
    },
    {
        type:"input",
        field:"priceRangeText",
        title:"Price Range",
        props: {
            disabled: true,
        },
    },
]

Full configuration: Element_Slider

value :Number | Array

Props

Attribute Name	Description	Type	Default
min	Minimum value	number	0
max	Maximum value	number	100
disabled	Whether to disable	boolean	false
step	Step size	number	1
showInput	Whether to show input box. Only effective in non-range selection	boolean	false
showInputControls	When input box is shown, whether to show control buttons for input box	boolean	true
size	Size of slider wrapper. This property is not available in vertical mode	enum	default
inputSize	Size of input box. If size property is set, default value automatically takes size	enum	default
showStops	Whether to show stops	boolean	false
showTooltip	Whether to show tooltip information	boolean	true
formatTooltip	Format tooltip information	Function	—
range	Whether to enable range selection	boolean	false
vertical	Vertical mode	boolean	false
height	Slider height. Required in vertical mode	string	—
ariaLabel	Native aria-label attribute	string	—
rangeStartLabel	Screen reader label for start marker when range is true	string	—
rangeEndLabel	Screen reader label for end marker when range is true	string	—
formatValueText	Format for displaying aria-valuenow attribute for screen reader	Function	—
debounce	Debounce delay for input, in milliseconds. Only effective when show-input equals true	number	300
tooltipClass	Custom class name for tooltip	string	—
placement	Position where Tooltip appears	enum	top
marks	Marks. Key type must be number and value must be in closed interval [min, max]. Each mark can have its own style	object	—
validateEvent	Whether to trigger form validation on input	boolean	true
persistent	When slider's tooltip is inactive and persistent is false, Popconfirm will be destroyed. When show-tooltip is false, persistent will always be false.	boolean	true

Events

Event Name	Description	Type
change	Triggered when value changes (when using mouse drag, only triggered after releasing mouse)	Function
input	Triggered when data changes (when using mouse drag, triggered in real-time during the process)	Function