React RangeSlider

Overview

The React RangeSlider enables end-users to increase, decrease and select a predefined range of values by dragging left and right handles along a track. The React UI component is a perfect companion to any user experience that requires a user to select a range of values.

See React RangeSlider Overview demo

React RangeSlider - Overview, KendoReact UI Library

Disabling RangeSlider

By default, the KendoReact RangeSlider can be interacted with when placed on a page. For scenarios that require users to be unable to interact with a component until certain requirements are met, the React RangeSlider can be disabled by setting a single configuration option.

See React RangeSlider Disabling demo

React RangeSlider - Disabling RangeSlider, KendoReact UI Library

Labels

To help indicate what each tick on a KendoReact RangeSlider represents, React developers have full access to setting the label of each tick to help users select values.

See React RangeSlider Labels demo

React RangeSlider - Labels, KendoReact UI Library

Controlled and Uncontrolled Modes

React components often work in either controlled mode, where the component itself maintains its state, or uncontrolled mode, where the developer is in charge of handling state. The KendoReact RangeSlider supports both controlled and uncontrolled modes.

See React RangeSlider Controlled and Uncontrolled Modes demo

Orientation

The React RangeSlider component has a single configuration option to help set the orientation to either vertical or horizontal orientations.

See React RangeSlider Orientation demo

React RangeSlider - Orientation, KendoReact UI Library

Keyboard Navigation

With its built-in keyboard navigation, the KendoReact RangeSlider can easily be interacted with using just a keyboard, allowing users to select a range of values using nothing but the keyboard as an input.

See React RangeSlider Keyboard Navigation demo

Accessibility

Accessibility is a top priority with the KendoReact UI library and the RangeSlider is certainly a part of this effort! With this in mind, the React RangeSlider is compliant with WAI-ARIA and Section 508 standards, as well as AA rated with WCAG 2.0.

See React RangeSlider Accessibility demo

React RangeSlider - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.