Skip to main content

​
Usage

The VRangeSlider component allows users to select a range between two values using dual thumb controls. 
<template>
  <v-range-slider
    v-model="range"
    :min="0"
    :max="100"
  />
</template>

<script setup>
import { ref } from 'vue'
const range = ref([20, 80])
</script>

​
With Label

Add a label to the slider: 
<template>
  <v-range-slider
    v-model="range"
    label="Price Range"
    :min="0"
    :max="1000"
  />
</template>

​
Step Increments

Define step increments for precise values: 
<template>
  <v-range-slider
    v-model="range"
    :min="0"
    :max="100"
    :step="5"
  />
</template>

​
Thumb Labels

Show labels on the thumb controls: 
<template>
  <v-range-slider
    v-model="range"
    thumb-label
  />
</template>

​
Strict Mode

Prevent thumbs from crossing: 
<template>
  <v-range-slider
    v-model="range"
    strict
  />
</template>

​
Vertical Orientation

Display the slider vertically: 
<template>
  <v-range-slider
    v-model="range"
    direction="vertical"
    style="height: 300px"
  />
</template>

​
Custom Colors

Customize track and thumb colors: 
<template>
  <v-range-slider
    v-model="range"
    color="primary"
    track-color="grey"
    thumb-color="primary"
  />
</template>

​
Props

​
modelValue
[number, number]
default:"[0, 0]"
The v-model value of the component as an array of two numbers representing the range
​
min
number | string
default:"0"
The minimum allowed value
​
max
number | string
default:"100"
The maximum allowed value
​
step
number | string
default:"0"
The step increment when moving the slider. 0 means no step restriction
​
strict
boolean
default:"false"
When enabled, prevents the range thumbs from crossing each other
​
disabled
boolean
default:"false"
Disables the slider
​
readonly
boolean
default:"false"
Makes the slider read-only
​
label
string
Label text for the slider
​
direction
'horizontal' | 'vertical'
default:"horizontal"
The orientation of the slider
​
thumbLabel
boolean | string
Show labels on the thumb controls. Use ‘always’ to keep labels visible
​
thumbSize
number
default:"20"
Size of the thumb controls
​
showTicks
boolean | 'always'
Show tick marks along the slider track
​
ticks
number[] | Record<string, string>
Custom tick positions and labels
​
tickSize
number
default:"2"
Size of the tick marks
​
color
string
Applies specified color to the control
​
trackColor
string
Color of the slider track
​
trackFillColor
string
Color of the filled portion of the track
​
thumbColor
string
Color of the thumb controls
​
trackSize
number
default:"4"
Height/width of the track
​
elevation
string | number
Elevation of the thumb controls
​
rounded
string | number | boolean
Border radius of the thumb controls
​
error
boolean
Puts the slider in an error state
​
hint
string
Hint text to display below the slider
​
persistentHint
boolean
Forces hint to always be visible
​
messages
string | string[]
Displays a list of messages or a single message

​
Slots

​
label
slot
Slot for custom label content
​
prepend
slot
Slot for content before the slider
​
append
slot
Slot for content after the slider
​
thumb-label
slot
Slot to customize the thumb label content
​
tick-label
slot
Slot to customize tick label rendering

​
Events

​
update:modelValue
event
Emitted when the range value changes
​
start
event
Emitted when the user starts interacting with the slider
​
end
event
Emitted when the user stops interacting with the slider
​
update:focused
event
Emitted when focus state changes
In non-strict mode, the thumbs can cross each other and their order will automatically adjust to maintain the proper min/max relationship.

Build docs developers (and LLMs) love

Get started for freeTalk to us