Kendo UI for Vue Native RangeSlider Overview

The Native RangeSlider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the value on the scale or using the arrow keys.

The Kendo UI for Vue Native RangeSlider component is part of the Kendo UI for Vue library of Vue components. It is distributed through NPM under the kendo-vue-inputs NPM package.

The Inputs Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the RangeSlider in action.

Example
View Source
Change Theme:

Key Features

  • Labels—You can use labels to define names for specific positions on the RangeSlider.
  • Orientation—You can render the RangeSlider vertically or horizontally.
  • Disabled—To prevent users from interacting with the RangeSlider, you can render it as disabled.
  • Controlled mode—Take advantage of the built-in options that allow you to control the value of the RangeSlider.
  • Keyboard navigation—The RangeSlider support numerous keyboard shortcuts that allow users to interact with the component.
  • Accessibility—The RangeSlider is accessible for screen readers and provides full WAI-ARIA support.

Support and Learning Resources

Additional Resources