Slider

The v-slider component is a better visualization of the number input. It is used for gathering numerical user data.

Usage

Continuous sliders should be used when precision is not a concern.


API

v-slider

Examples

Discrete

Discrete sliders offer a thumb label that displays the exact current amount. Using the step prop you can disallow selecting values outside of steps.


Icons

You can add icons to the slider with the append-icon and prepend-icon props.


With an editable numeric value

Sliders can be combined with other components for a better display.


Custom colors

You can set the colors of the slider using the props color, track-color and thumb-color.


Range

Range sliders.