vant/src/slider

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

<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
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 draging	event: TouchEvent
drag-end	Emitted when end draging	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 }

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)	-