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+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
RangeSlider Header
  • Provide a Visual Control for Selecting Numeric Ranges

    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 the 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 the 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 the 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 the 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 the 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 the 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 the React RangeSlider Accessibility demo


All KendoReact Components

Next Steps