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

v-slider
New in — v1.1
Name
always-dirty
Default
false
Type
boolean

When used with the thumb-label prop will always show the thumb label.

Name
append-icon
Default
undefined
Type
string

Appends an icon to the component, uses the same syntax as v-icon

Name
append-icon-cb
Default
null
Type
function

Callback for appended icon when clicked

Name
background-color
Default
undefined
Type
string

Changes the background-color of the input

Name
color
Default
undefined
Type
string

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))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean
Name
error
Default
false
Type
boolean

Puts the input in a manual error state

Name
error-count
Default
1
Type
number | string

The total number of errors that should display at once

Name
error-messages
Default
[]
Type
string | array

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

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
hide-details
Default
false
Type
boolean

Hides hint, validation errors

Name
hint
Default
undefined
Type
string

Hint text

New in — v1.1
Name
inverse-label
Default
false
Type
boolean

Reverse the label position. Works with rtl.

Name
label
Default
undefined
Type
string

Sets input label

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
loading
Default
false
Type
boolean | string

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

Name
max
Default
100
Type
number | string

Sets maximum width

Name
messages
Default
[]
Type
string | array

Displays a list of messages or message if using a string

Name
min
Default
0
Type
number | string

Sets minimum width

Name
persistent-hint
Default
false
Type
boolean

Forces hint to always be visible

Name
prepend-icon
Default
undefined
Type
string

Prepends an icon to the component, uses the same syntax as v-icon

Name
prepend-icon-cb
Default
null
Type
function

Callback for prepended icon when clicked

Name
range
Default
false
Type
boolean
Name
readonly
Default
false
Type
boolean
Name
rules
Default
[]
Type
array

Accepts an array of functions that return either True or a String with an error message

Name
step
Default
1
Type
number | string

If greater than 0, sets step interval for ticks

New in — v1.1
Name
success
Default
false
Type
boolean

Puts the input in a manual success state

New in — v1.1
Name
success-messages
Default
[]
Type
string | array

Puts the input in a success state and passes through custom success messsages.

Name
thumb-color
Default
undefined
Type
string

Sets the thumb and thumb label color

Name
thumb-label
Default
undefined
Type
boolean | string

Show thumb label

New in — v1.1
Name
thumb-size
Default
32
Type
number | string

Controls the size of the thumb-label

New in — v1.1
Name
tick-labels
Default
[]
Type
array

When provided with Array, will attempt to map the labels to each step in index order

New in — v1.1
Name
tick-size
Default
1
Type
number | string

Controls the size of ticks

Name
ticks
Default
false
Type
boolean | string
Name
track-color
Default
undefined
Type
string

Sets the track fill color

Name
validate-on-blur
Default
false
Type
boolean

Delays validation until blur event

Name
value
Default
undefined
Type
number | string

Input value

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 sliderNew in v1.1

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


TicksNew in v1.1

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 append-icon-cb and prepend-icon-cb 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.


RangeNew in v1.1

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.