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.
<v-range-slider></v-range-slider>API
| Component | Description |
|---|---|
| v-range-slider | Primary Component |
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 a vertical slider, be aware that v-range-slider is not a simple HTML element. This means plain CSS on the component will not affect the correct internal element. Instead, you must use a deep selector.
TIP:
The :deep() pseudo-class allows scoped styles to affect child components, which is why it works for resizing the slider. See the official Vue documentation for more details: Scoped CSS and :deep selectors
Slots
Thumb label
Using the tick-labels prop along with the thumb-label slot, you can create a very customized solution.