v-slider component is a better visualization of the number input. It is used for gathering numerical user data.
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.
When used with the thumb-label prop will always show the thumb label.
Appends an icon to the component, uses the same syntax as
Changes the background-color of the input
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
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 messsages. 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
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
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 messsages.
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
Sets the track fill color
Delays validation until blur event
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
always-dirty its color will never change, even when on
Custom Range slider
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
prepend-icon props. With
@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.
You can set the colors of the slider using the props
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.
Min & Max values
You can set
max values of sliders.
Use slotted prepend and append icons to easily customize the
v-slider to fit any situation.