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

Examples

Min & Max values

You can set min and max values of sliders.

Disabled

You cannot interact with disabled sliders.

Readonly

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

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.

Vertical sliders

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

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.

Inverse label

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

Custom Range slider

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

Ticks

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

Custom colors

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

Range

Range sliders.

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.

Slots

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

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise