The Vue RangeSlider provides an interactive alternative to text fields and spinners. It is a visual input element in which users drag handles along a track to set ranges.

See the Vue RangeSlider demo

The Vue RangeSlider allows you to set specific values and their position to display along the track.

See the Vue RangeSlider Labels demo

The Vue RangeSlider renders horizontally by default, but you can choose to display it vertically.

See the Vue RangeSlider Orientation demo

By default, the Vue RangeSlider is in an uncontrolled state, which means the user has control over it. You can manage the state by setting values and handling onChange events.

See the Vue RangeSlider Controlled Mode demo

For cases when you would only like to display the slider as read-only, you just need to set the disabled property to true.

See the Vue Disabled RangeSlider demo

Like the rest of the components in Kendo UI for Vue, this component includes built-in keyboard shortcuts for all its essential functions.

See the Vue RangeSlider Keyboard Navigation demo

The Kendo UI for Vue team strives for the best accessibility support by complying with WAI-ARIA and Section 508 standards.

Read the Vue RangeSlider Accessibility details