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


# 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.
Edit this page on GitHub
Last updated:11/15/2021, 10:04:14 AM