Slider

Rule

Basic Example

const rule = {
    type: 'slider',
    title: 'Slider',
    field: 'slider',
    value: 50,
    props: {
        disabled: false,
    }
}

Props Configuration Examples

Single Value Slider

const rule = {
    type: 'slider',
    title: 'Volume',
    field: 'volume',
    value: 50,
    props: {
        min: 0,
        max: 100,
        step: 1,
    }
}

Dual Slider (Range Selection)

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

Custom Color

const rule = {
    type: 'slider',
    title: 'Volume',
    field: 'volume',
    value: 50,
    props: {
        activeColor: '#07c160',
        inactiveColor: '#ebedf0',
    }
}

Vertical Slider

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

Events Examples

Handle Slider Changes

const rule = {
    type: 'slider',
    title: 'Volume',
    field: 'volume',
    value: 50,
    props: {
        min: 0,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('Value changed (drag ended):', value);
        },
        'drag-start': (event) => {
            console.log('Drag started:', event);
        },
        'drag-end': (event) => {
            console.log('Drag ended:', event);
        },
    },
}

Update Display After Range Changes

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

Complete configuration items:Vant_Slider

value :Number | Array

Props

Parameter	Description	Type	Default Value
max	Maximum value	number | string	100
min	Minimum value	number | string	0
step	Step size	number | string	1
bar-height	Progress bar height, default unit is px	number | string	2px
button-size	Slider button size, default unit is px	number | string	24px
active-color	Progress bar active state color	string	#1989fa
inactive-color	Progress bar inactive state color	string	#e5e5e5
range	Whether to enable dual slider mode	boolean	false
reverse	Whether to reverse the progress bar	boolean	false
disabled	Whether to disable slider	boolean	false
readonly	Whether it is in readonly state, cannot modify slider value in readonly state	boolean	false
vertical	Whether to display vertically	boolean	false

Events

Event Name	Description	Callback Parameters
change	Triggered when progress changes and drag ends	value: number
drag-start	Triggered when drag starts	event: TouchEvent
drag-end	Triggered when drag ends	event: TouchEvent