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.

Example
View Source
Change Theme:

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

  • LabelsYou can use labels to define names for specific positions on the Slider.
  • Side ButtonsThe Slider allows you to configure side buttons that increase or decrease the value by a predefined step.
  • OrientationYou can set the Slider's orientation to vertical or horizontal.
  • Controlled modeTake advantage of the built-in options that allow you to control the value of the Slider.
  • Keyboard navigationThe Slider supports numerous keyboard shortcuts that allow users to interact with the component.
  • AccessibilityThe Slider component is accessible for screen readers and provides full WAI-ARIA support.

In this article

Not finding the help you need?