KendoReact

React RangeSlider

  • A handy and accessible visual interface for selecting numeric ranges that can replace numeric inputs.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • 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 Accessibility - KendoReact

All KendoReact Components

waves bg

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.