KendoReact Slider Overview

The KendoReact Slider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the side arrow buttons.

The KendoReact Slider 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 Slider in action.

Change Theme

Theme

Loading ...

The Slider component 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 Slider 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 Slider.
• Side Buttons—The Slider allows you to configure side buttons that increase or decrease the value by a predefined step.
• Orientation—You can set the Slider's orientation to vertical or horizontal.
• Controlled mode—Take advantage of the built-in options that allow you to control the value of the Slider.
• Keyboard navigation—The Slider supports numerous keyboard shortcuts that allow users to interact with the component.
• Accessibility—The Slider component is accessible for screen readers and provides full WAI-ARIA support.

Suggested Links

• Getting Started with the KendoReact Inputs
• Getting Started with KendoReact
• API Reference of the Slider Component
• React Slider High-Level Overview