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
When used with the thumb-label prop will always show the thumb label.
Appends an icon to the component, uses the same syntax as v-icon
Changes the background-color of the input
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Applies the dark theme variant
Disable the input
Puts the input in a manual error state
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Sets the component height
Hides hint, validation errors
Hint text
Reverse the label position. Works with rtl.
Sets input label
Applies the light theme variant
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
Sets maximum width
Displays a list of messages or message if using a string
Sets minimum width
Forces hint to always be visible
Prepends an icon to the component, uses the same syntax as v-icon
Puts input in readonly state
Accepts an array of functions that return either True or a String with an error message
If greater than 0, sets step interval for ticks
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Sets the thumb and thumb label color
Show thumb label
Controls the size of the thumb-label
When provided with Array
Controls the size of ticks
Components.Sliders.
Sets the track fill color
Delays validation until blur event
Controls visibility
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 slider
Using the tick-labels prop along with a scoped slot, you can create a very customized solution.
Ticks
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 @click:append and @click:prepend 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.
Range
Range sliders.
Min & Max values
You can set min and max values of sliders.
Metronome
Use slotted prepend and append icons to easily customize the v-slider to fit any situation.