VSlider
The VSlider component allows users to select a numeric value from a range using a draggable thumb along a track.
Basic Usage
<template>
<VSlider
v-model="value"
:min="0"
:max="100"
label="Volume"
/>
</template>
<script setup>
import { ref } from 'vue'
const value = ref(50)
</script>
modelValue
number | string
default:"0"
The current value of the slider.
min
number | string
default:"0"
Minimum value of the slider.
max
number | string
default:"100"
Maximum value of the slider.
step
number | string
default:"0"
Step increment value. Set to 0 for any value.
Label text for the slider.
thumbLabel
boolean | string
default:"false"
Show a label on the thumb. Use ‘always’ to always display.
Color of the slider thumb.
Size of the slider thumb in pixels.
Color of the slider track (unfilled portion).
Color of the filled portion of the track.
Height of the slider track in pixels.
Color theme for the slider.
Make the slider readonly.
Elevation of the slider thumb.
ticks
number[] | Record<string, string>
Show tick marks on the track. Can be an array of values or an object mapping values to labels.
showTicks
boolean | 'always'
default:"false"
Show tick marks. Use ‘always’ to show ticks even when not interacting.
Size of tick marks in pixels.
With Steps
<template>
<VSlider
v-model="value"
:min="0"
:max="100"
:step="10"
label="Step by 10"
thumb-label
/>
</template>
<script setup>
import { ref } from 'vue'
const value = ref(50)
</script>
With Ticks
<template>
<div>
<!-- Basic ticks -->
<VSlider
v-model="value1"
:min="0"
:max="100"
:step="25"
show-ticks="always"
label="With ticks"
/>
<!-- Custom tick labels -->
<VSlider
v-model="value2"
:min="0"
:max="3"
:step="1"
:ticks="{
0: 'Low',
1: 'Medium',
2: 'High',
3: 'Very High'
}"
show-ticks="always"
label="Custom tick labels"
>
<template #tick-label="{ tick }">
<span class="text-caption">{{ tick.label }}</span>
</template>
</VSlider>
</div>
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref(50)
const value2 = ref(1)
</script>
Thumb Label
<template>
<div>
<!-- Show on hover -->
<VSlider
v-model="value1"
label="Hover to see value"
thumb-label
/>
<!-- Always visible -->
<VSlider
v-model="value2"
label="Always visible"
thumb-label="always"
/>
<!-- Custom thumb label -->
<VSlider
v-model="value3"
label="Custom label"
thumb-label
>
<template #thumb-label="{ modelValue }">
{{ modelValue }}%
</template>
</VSlider>
</div>
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref(50)
const value2 = ref(50)
const value3 = ref(50)
</script>
<template>
<div>
<VSlider
v-model="value1"
label="Primary"
color="primary"
/>
<VSlider
v-model="value2"
label="Success"
color="success"
/>
<VSlider
v-model="value3"
label="Custom colors"
track-color="grey"
track-fill-color="purple"
thumb-color="purple"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref(50)
const value2 = ref(50)
const value3 = ref(50)
</script>
Disabled and Readonly
<template>
<div>
<VSlider
v-model="value1"
label="Disabled"
disabled
/>
<VSlider
v-model="value2"
label="Readonly"
readonly
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref(50)
const value2 = ref(50)
</script>
Validation
<template>
<VForm>
<VSlider
v-model="value"
label="Select a value between 30 and 70"
:min="0"
:max="100"
:rules="[
v => v >= 30 || 'Value must be at least 30',
v => v <= 70 || 'Value must be at most 70'
]"
thumb-label
/>
</VForm>
</template>
<script setup>
import { ref } from 'vue'
const value = ref(50)
</script>
Emitted when the slider value changes.
Emitted when the user starts dragging the slider.
Emitted when the user stops dragging the slider.
update:focused
(focused: boolean) => void
Emitted when the focus state changes.
Customize the label content.
Customize the thumb label content.
Customize the tick label content.