Kendo UI for Angular Slider Overview

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

The Slider Component is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the Slider in action.

Example
View Source
Change Theme:

Key Features

  • Orientation—The Slider allows you to display it in a vertical or horizontal direction.
  • Forms support—You can use the Slider both in template-driven and reactive Angular forms.
  • Ticks—The Slider provides configuration options for setting the placement, titles, and width of its ticks, which indicate the values resulting from each incremented predefined step.
  • Predefined steps—You can use the configuration options of the Slider to define the step which the component uses to increase or decrease its value.
  • Side buttons—The Slider enables you to show or hide, and set the titles of its side buttons.
  • Disabled Slider—You can use the configuration options of the Slider to disable the component so that users are not able to interact with it.
  • Read-only Slider—The Slider provides an option for overriding its default active state.
  • Debouncing value changes—All Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
  • Appearance—All Kendo UI for Angular Inputs enable you to set their dimensions.
  • Globalization—All Kendo UI for Angular Inputs provide globalization options.
  • Accessibility—The Slider is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The Slider supports a number of keyboard shortcuts for processing various commands.

Support and Learning Resources

Additional Resources