# Sliders

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.

Usage example coming soon...


# Examples

# Props

# Colors

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

# Disabled

You cannot interact with disabled sliders.

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

# Inverse label

v-slider with inverse-label property displays label at the end of it.

# Min and max

You can set min and max values of sliders.

# Readonly

You cannot interact with readonly sliders, but they look as ordinary ones.

# Step

v-slider can have steps other than 1. This can be helpful for some applications where you need to adjust values with more or less accuracy.

# Thumb

You can display a thumb label while sliding or always with the thumb-label prop . It can have a custom color by setting thumb-color prop and a custom size with the thumb-size prop. With the always-dirty prop its color will never change, even when on the `min value.

# Ticks

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

# Validation

Vuetify includes simple validation through the rules prop. The prop accepts a mixed array of types function, boolean and string. When the input value changes, each element in the array will be validated. Functions pass the current v-model as an argument and must return either true / false or a string containing an error message.

# Vertical sliders

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

# Slots

# Append and prepend

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

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.