Sliders
Slider - Min & Max values

You can set min and max values of sliders.

Min and max default slider
Slider - Custom colors

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

50.0
Slider - Icons

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.

Slider - Vertical sliders

You can use vertical to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.

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

Show thumb when using slider
Always show thumb label
45.0
Custom thumb size
45.0
Custom thumb label
😐
Slider - Ticks

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

Show ticks when using slider
Always show ticks
Tick size
Tick labels
Figs
Lemon
Pear
Apple
Slider - 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.

Rules
30
Persistent hint
30
Slider - Slots

Use slots such as prepend and append to easily customize the v-slider to fit any situation.

METRONOME
40BPM