# Range Sliders

The v-range-slider component complements the v-slider component nicely when you are in need of representing a range of values.

# Usage

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.


# Examples

# Props

# Strict

With the strict prop applied, the thumbs of the range slider are not allowed to cross over each other.

# Disabled

You cannot interact with disabled sliders.

# Min and max

You can set min and max values of sliders.

# Step

v-range-slider can have steps other than 1. This can be helpful for some applications where you need to adjust values with more or less accuracy.

# Vertical sliders

You can use the vertical prop to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.

# Slots

# Thumb label

Using the tick-labels prop along with the thumb-label slot, you can create a very customized solution.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.