KendoReact

React Slider

  • Choose this sleek selection tool to enable users to select values through a handle interface.
  • 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 Slider provides a sleek and intuitive UI interface for increasing, decreasing and selecting predefined values by dragging a handle along a track, or selecting a value by utilizing the provided side arrow buttons.

    See React Slider Overview demo

    React Slider - Overview, KendoReact UI Library
  • Orientation

    Out of the box, the KendoReact Slider can render itself in both horizontal or vertical modes. Switching between the two is as simple as updating a single configuration option.

    See React Slider Orientation demo

    React Slider - Orientation, KendoReact UI Library
  • Labels

    With the KendoReact Slider, any value on its track can be provided with a label to indicate to the user what that particular tick represents.

    See React Slider Labels demo

    React Slider - Labels, KendoReact UI Library
  • Controlled and Uncontrolled Modes

    The KendoReact Slider works with both controlled and uncontrolled modes, allowing React developers to choose whether the KendoReact Slider should maintain its state (controlled mode) or if the state should be handled outside of the component (uncontrolled mode).

    See React Slider Controlled and Uncontrolled Modes demo

  • Keyboard Navigation

    Thanks to built-in support for keyboard navigation, interaction with the React Slider can be done completely by utilizing the keyboard.

    See React Slider Keyboard Navigation demo

  • Accessibility

    The KendoReact Slider complies with modern accessibility guidelines, sporting compliance with Section 508 and WAI-ARIA modes. It’s also AAA rated with WCAG 2.0.

    See React Slider 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.