Slider - Vant 4

Slider

Intro

Used to select a value within a given range.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Slider } from'vant'; const app = createApp(); app.use(Slider);

Usage

Basic Usage

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const value = ref(50); constonChange = (value) => showToast('Current value: ' + value); return { value, onChange, }; }, };

Dual thumb

Add range attribute to open dual thumb mode.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { // value must be an Arrayconst value = ref([10, 50]); constonChange = (value) => showToast('Current value: ' + value); return { value, onChange, }; }, };

Range

Disabled

Step size

Custom style

Custom button

Vertical

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const value = ref(50); const value2 = ref([10, 50]); constonChange = (value) => showToast('Current value: ' + value); return { value, value2, onChange, }; }, };

API

Props

Attribute	Description	Type	Default
v-model	Current value	*number	[number, number]*
max	Max value	*number	string*
min	Min value	*number	string*
step	Step size	*number	string*
bar-height	Height of bar	*number	string*
button-size	Button size	*number	string*
active-color	Active color of bar	string	#1989fa

| inactive-color | Inactive color of bar | string | #e5e5e5 |

| range | Whether to enable dual thumb mode | boolean | false | | reverse | Whether to reverse slider | boolean | false | | disabled | Whether to disable slider | boolean | false | | readonly | Whether to be readonly | boolean | false | | vertical | Whether to display slider vertically | boolean | false |

Events

Event	Description	Arguments
update:model-value	Emitted when value is changing	value: number
change	Emitted after value changed	value: number
drag-start	Emitted when start dragging	event: TouchEvent
drag-end	Emitted when end dragging	event: TouchEvent

Slots

Name	Description	SlotProps
button	Custom button	{ value: number, dragging: boolean }
left-button	Custom left button in range mode	{ value: number, dragging: boolean, dragIndex?: number }
right-button	Custom right button in range mode	{ value: number, dragging: boolean, dragIndex?: number }

Types

The component exports the following type definitions:

importtype { SliderProps } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-slider-active-background	var(--van-primary-color)	-
--van-slider-inactive-background	var(--van-gray-3)	-
--van-slider-disabled-opacity	var(--van-disabled-opacity)	-
--van-slider-bar-height	2px	-
--van-slider-button-width	24px	-
--van-slider-button-height	24px	-
--van-slider-button-radius	50%	-
--van-slider-button-background	var(--van-white)	-
--van-slider-button-shadow	0 1px 2px rgba(0, 0, 0, 0.5)	-