Slider

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

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.


API

v-slider

Examples

Thumb

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

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 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.


Validation

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.