Slider
The v-slider component can be used as an alternative visualization instead of a number input.
Basic
The v-slider component is a better visualization of the number input.
Disabled and Readonly
You cannot interact with disabled and readonly sliders.
Colors
You can set the colors of the slider using the props color, track-color and thumb-color.
Icons
You can add icons to the slider with the append-icon and prepend-icon props.
Step
Using the step prop you can control the precision of the slider, and how much it should move each step.
Validation
Vuetify includes simple validation through the rules prop.
Min and Max
You can set min and max values of sliders.
Size
Use thumb-size, tick-size, and track-size prop to increase and decrease the size of thumb, tick and track.
Thumb
You can display a thumb label while sliding or always with the thumb-label prop.
Ticks
Tick marks represent predetermined values to which the user can move the slider.
Vertical
You can use the vertical prop to switch sliders to a vertical orientation.
Append text field
Sliders can be combined with other components in its append slot, such as v-text-field, to add additional functionality to the component.
Append and prepend
Use slots such as append and prepend to easily customize the v-slider to fit any situation.
CONTENTS
Introduction
Basic
Disabled and Readonly
Colors
Icons
Step
Validation
Min and max
Size
Thumb
Ticks
Vertical
Append text field
Append and prepend