Kendo UI for Angular RangeSlider Overview

The Kendo UI for Angular RangeSlider enables the user to select ranges by dragging its handles or by clicking its track.

The RangeSlider Component is part of Kendo UI for Angular, 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
Edit In Stackblitz  
Change Theme:

Key Features

  • OrientationThe RangeSlider allows you to display it in a vertical or horizontal direction.
  • Forms supportYou can use the RangeSlider both in template-driven and reactive Angular forms.
  • TicksThe RangeSlider provides configuration options for setting the placement, titles, and width of its ticks, which indicate the values resulting from each incremented predefined step.
  • Predefined stepsYou can use the configuration options of the RangeSlider to define the step which the component uses to increase or decrease its value.
  • Disabled RangeSliderYou can use the configuration options of the RangeSlider to disable the component so that users are not able to interact with it.
  • Read-only RangeSliderThe RangeSlider provides an option for overriding its default active state.
  • Debouncing value changesAll Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
  • AppearanceAll Kendo UI for Angular Inputs enable you to set their dimensions.
  • GlobalizationAll Kendo UI for Angular Inputs provide globalization options.
  • AccessibilityThe RangeSlider is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe RangeSlider supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?