KendoReact RangeSlider Overview
The KendoReact 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 KendoReact RangeSlider component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs NPM package.
The following example demonstrates the RangeSlider in action.
Example
View Source
Edit In Stackblitz
Change Theme:
The RangeSlider is part of the KendoReact Inputs component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the RangeSlider and the rest of the components in the package, see the Getting Started with the KendoReact Inputs guide.
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.
