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[]	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: current rate
change	Emitted after value changed	value: current rate
drag-start	Emitted when start draging	-
drag-end	Emitted when end draging	-

Slots

Name	Description
button	Custom button

Less Variables

How to use: Custom Theme.

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