Slider

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.

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

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 @click:append and @click:prepend you can trigger a callback function when click the icon.

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

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.

Range sliders.

You can set min and max values of sliders.

Use slotted prepend and append icons to easily customize the v-slider to fit any situation.