Sliders

The v-slider component can be used as an alternative visualization instead of a number input.

Usage

Sliders reflect a range of values along a track, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

API

Examples

Props

Colors

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

v-slider/prop-colors.vue

Disabled

You cannot interact with disabled sliders.

v-slider/prop-disabled.vue

Step

Using the step prop you can control the precision of the slider, and how much it should move each step.

v-slider/prop-step.vue

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.

v-slider/prop-icons.vue

Min and max

You can set min and max values of sliders.

v-slider/prop-min-and-max.vue

Readonly

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

v-slider/prop-readonly.vue

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.

v-slider/prop-thumb.vue

Ticks

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

v-slider/prop-ticks.vue

Vertical sliders

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

v-slider/prop-vertical.vue

Slots

Append and prepend

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

v-slider/slot-append-and-prepend.vue

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.

v-slider/slot-append-text-field.vue

Ready for more?

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