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 following example demonstrates the RangeSlider in action.
Example
View Source
Change Theme:
Key Features
- Orientation—The RangeSlider allows you to display it in a vertical or horizontal direction.
- Forms support—You can use the RangeSlider both in template-driven and reactive Angular forms.
- Ticks—The 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 steps—You can use the configuration options of the RangeSlider to define the step which the component uses to increase or decrease its value.
- Disabled RangeSlider—You can use the configuration options of the RangeSlider to disable the component so that users are not able to interact with it.
- Read-only RangeSlider—The RangeSlider provides an option for overriding its default active state.
- Debouncing value changes—All Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
- Appearance—All Kendo UI for Angular Inputs enable you to set their dimensions.
- Globalization—All Kendo UI for Angular Inputs provide globalization options.
- Accessibility—The RangeSlider is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The RangeSlider supports a number of keyboard shortcuts for processing various commands.
Support and Learning Resources
- RangeSlider Homepage
- Getting Started with the Kendo UI for Angular Inputs
- API Reference of the RangeSlider
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- RangeSlider Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base
