vant/src/slider

Slider

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 { Toast } from 'vant';

export default {
  data() {
    return {
      value: 50,
    };
  },
  methods: {
    onChange(value) {
      Toast('Current value：' + value);
    },
  },
};

Dual thumb

Add range attribute to open dual thumb mode

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

import { Toast } from 'vant';

export default {
  data() {
    return {
      // value must be an Array
      value: [10, 50],
    };
  },
  methods: {
    onChange(value) {
      Toast('current value：' + value);
    },
  },
};

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 />
  <van-slider v-model="value2" range vertical @change="onChange" />
</div>

import { Toast } from 'vant';

export default {
  data() {
    return {
      value: 50,
      value2: [10, 50],
    };
  },
  methods: {
    onChange(value) {
      Toast('Current value：' + value);
    },
  },
};

API

Props

Attribute	Description	Type	Default
value	Current value	number | array	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 v2.4.5	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
vertical	Whether to display slider vertically	boolean	false

Events

Event	Description	Arguments
input	Instant triggered when value changed	value: current rate
change	Triggered after value changed	value: current rate
drag-start	Triggered when start drag	-
drag-end	Triggered when end drag	-

Slots

Name	Description
button	Custom button