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

Examples

Min & Max values

You can set min and max values of sliders.

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.

Custom Range slider

Using the tick-labels prop along with a scoped slot, 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.

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.

Range

Range sliders.

Slots

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

Edit this page | language on Github