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


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.





You can display a thumb-label while sliding or always. It It can have a custom color by setting thumb-color and a custom size with thumb-size. With always-dirty its color will never change, even when on min value.

Custom Range sliderNew in v1.1

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

TicksNew in v1.1

Tick marks represent predetermined values to which the user can move the slider.


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


You can add icons to the slider with the append-icon and prepend-icon props. With append-icon-cb and prepend-icon-cb you can trigger a callback function when click the icon.

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.


Vuetify includes simple validation through the rules prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either true or a String, the error message.

RangeNew in v1.1

Range sliders.

Min & Max values

You can set min and max values of sliders.