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,
    }
}

Range Slider

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

Show Marks

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

Vertical Slider

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

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 (dragging):', value);
        },
        afterChange: (value) => {
            console.log('Value changed (drag ended):', 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,
        },
        inject: true,
        on: {
            afterChange: ($inject, value) => {
                // Update the price range display
                const [min, max] = value;
                $inject.api.setValue('priceRangeText', `¥${min} - ¥${max}`);
            },
        },
    },
    {
        type:"input",
        field:"priceRangeText",
        title:"Price Range",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: Ant-design-vue_Slider

value :Number | Array

Props

Parameter	Description	Type	Default
autofocus	Auto focus	boolean	false
disabled	When value is true, slider is disabled	boolean	false
dots	Whether can only drag to marks	boolean	false
included	Effective when marks is not empty object, when value is true means inclusive relationship, false means parallel	boolean	true
mark	Custom mark	v-slot:mark	{ point: number, label: any }
marks	Mark marks, key type must be number and value must be in closed interval [min, max], each label can set style separately	object	{ number : string|VNode } or { number: { style: object, label: string|VNode } } or { number: () => VNode }
max	Maximum value	number	100
min	Minimum value	number	0
range	Dual slider mode	boolean	false
reverse	Reverse coordinate axis	boolean	false
step	Step value, must be greater than 0 and divisible by (max - min). When marks is not empty object, can set step to null, at this time Slider's selectable values are only the parts marked by marks.	number|null	1
vertical	When value is true, Slider is vertical direction	Boolean	false
tipFormatter	Slider will pass current value to tipFormatter, and display return value of tipFormatter in Tooltip, if null, hide Tooltip.	Function|null	IDENTITY
tooltipPlacement	Set Tooltip display position. Reference Tooltip.	string
tooltipOpen	When value is true, Tooltip will always display; otherwise always not display, even when dragging and hovering.	Boolean
getTooltipPopupContainer	Tooltip rendering parent node, default renders to body.	Function	() => document.body

Events

Event Name	Description	Callback Parameters
change	When Slider's value changes, change event will be triggered, and changed value will be passed as parameter.	Function(value)
afterChange	Consistent with mouseup trigger timing, current value is passed as parameter.	Function(value)