Install

import { createApp } from 'vue';
import { Slider } from 'vant';

const app = createApp();
app.use(Slider);

Usage

Basic Usage

<van-slider v-model="value" @change="onChange" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref(50);
    const onChange = (value) => Toast('Current value: ' + value);
    return {
      value,
      onChange,
    };
  },
};

Dual thumb

Add range attribute to open dual thumb mode.

<van-slider v-model="value" range @change="onChange" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    // value must be an Array
    const value = ref([10, 50]);
    const onChange = (value) => Toast('Current value: ' + value);
    return {
      value,
      onChange,
    };
  },
};

Range

<van-slider v-model="value" :min="-50" :max="50" />

Disabled

<van-slider v-model="value" disabled />

Step size

<van-slider v-model="value" :step="10" />

Custom style

<van-slider v-model="value" bar-height="4px" active-color="#ee0a24" />

Custom button

<van-slider v-model="value" active-color="#ee0a24">
  <template #button>
    <div class="custom-button">{{ value }}</div>
  </template>
</van-slider>

<style>
  .custom-button {
    width: 26px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 100px;
  }
</style>

Vertical

<div :style="{ height: '150px' }">
  <van-slider v-model="value" vertical @change="onChange" />
  <van-slider
    v-model="value2"
    range
    vertical
    style="margin-left: 100px;"
    @change="onChange"
  />
</div>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref(50);
    const value2 = ref([10, 50]);
    const onChange = (value) => Toast('Current value: ' + value);
    return {
      value,
      value2,
      onChange,
    };
  },
};

API

Props

Attribute	Description	Type	Default
v-model	Current value	number \| [number, number]	`0`
max	Max value	number \| string	`100`
min	Min value	number \| string	`0`
step	Step size	number \| string	`1`
bar-height	Height of bar	number \| string	`2px`
button-size	Button size	number \| string	`24px`
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 `v3.2.1`	Whether to reverse slider	`false`
disabled	Whether to disable slider	boolean	`false`
readonly `v3.0.5`	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 }
left-button `v3.1.3`	Custom left button in range mode	{ value: number }
right-button `v3.1.3`	Custom right button in range mode	{ value: number }

Types

The component exports the following type definitions:

import type { 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-color	var(--van-primary-color)	-
--van-slider-inactive-background-color	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-border-radius	50%	-
--van-slider-button-background-color	var(--van-white)	-
--van-slider-button-box-shadow	0 1px 2px rgba(0, 0, 0, 0.5)	-

Slider

Intro