Van Slider

Vant Slider Component

Slider component for selecting values within a given range with single or dual thumb support.

When to Invoke

Invoke this skill when:

• User needs to implement a range selector
• User wants to create volume or brightness controls
• User needs dual thumb range selection
• User wants to customize slider appearance
• User asks about vertical sliders or custom buttons

Features

• Single/Dual Thumb: Support for single value or range selection
• Custom Range: Configurable min and max values
• Step Size: Adjustable step increments
• Custom Styling: Customizable bar height, colors, and button size
• Custom Button: Slot for custom button content
• Vertical Mode: Support for vertical orientation
• Reverse Mode: Reverse slider direction
• Drag Events: Start and end drag event notifications

API Reference

Props

Events

Slots

Usage Examples

Basic Usage

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

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const value = ref(50)

const => {
  showToast('Current value: ' + value)
}
</script>

Dual Thumb

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

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const value = ref([10, 50])

const => {
  showToast('Current value: ' + value)
}
</script>

Custom Range

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

<script setup>
import { ref } from 'vue'

const value = ref(0)
</script>

Disabled State

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

<script setup>
import { ref } from 'vue'

const value = ref(50)
</script>

Step Size

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

<script setup>
import { ref } from 'vue'

const value = ref(50)
</script>

Custom Style

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

<script setup>
import { ref } from 'vue'

const value = ref(50)
</script>

Custom Button

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

<script setup>
import { ref } from 'vue'

const value = ref(50)
</script>

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

Vertical Slider

<template>
  <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>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const value = ref(50)
const value2 = ref([10, 50])

const => {
  showToast('Current value: ' + value)
}
</script>

Volume Control

<template>
  <div class="volume-control">
    <van-icon :name="volumeIcon" />
    <van-slider 
      v-model="volume" 
      :max="100"
      active-color="#1989fa"
      @change="onVolumeChange"
    />
    <span class="volume-value">{{ volume }}%</span>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const volume = ref(50)

const volumeIcon = computed(() => {
  if (volume.value === 0) return 'volume-o'
  if (volume.value < 50) return 'volume'
  return 'volume'
})

const => {
  console.log('Volume changed to:', val)
}
</script>

<style scoped>
.volume-control {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
}

.volume-value {
  min-width: 40px;
  text-align: right;
  font-size: 14px;
  color: #323233;
}
</style>

Price Range Selector

<template>
  <div class="price-range">
    <div class="price-header">
      <span>Price Range</span>
      <span class="price-values">${{ value[0] }} - ${{ value[1] }}</span>
    </div>
    <van-slider 
      v-model="value" 
      range 
      :min="0" 
      :max="1000" 
      :step="10"
      active-color="#ee0a24"
      @change="onPriceChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref([100, 500])

const => {
  console.log('Price range:', val)
}
</script>

<style scoped>
.price-range {
  padding: 16px;
}

.price-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 14px;
  color: #323233;
}

.price-values {
  color: #ee0a24;
  font-weight: bold;
}
</style>

With Form

<template>
  <van-form @submit="onSubmit">
    <van-field name="slider" label="Brightness">
      <template #input>
        <van-slider v-model="brightness" />
      </template>
    </van-field>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        Submit
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const brightness = ref(50)

const => {
  showToast('Brightness: ' + brightness.value)
}
</script>

Best Practices

1. Appropriate Range: Set meaningful min and max values for your use case
2. Step Size: Use appropriate step sizes for different scenarios
3. Visual Feedback: Show current value with custom button or label
4. Touch Targets: Ensure button size is adequate for touch interaction
5. Accessibility: Provide labels and value announcements for screen readers
6. Vertical Space: Ensure adequate height for vertical sliders
7. Dual Thumb: Use range mode for interval selection
8. Performance: Debounce change events for expensive operations