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 100+ 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
Edit In Stackblitz  
Change Theme:

Key Features

  • OrientationThe Slider allows you to display it in a vertical or horizontal direction.
  • Forms supportYou can use the Slider both in template-driven and reactive Angular forms.
  • TicksThe 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 stepsYou can use the configuration options of the Slider to define the step which the component uses to increase or decrease its value.
  • Side buttonsThe Slider enables you to show or hide, and set the titles of its side buttons.
  • Disabled SliderYou can use the configuration options of the Slider to disable the component so that users are not able to interact with it.
  • Read-only SliderThe Slider provides an option for overriding its default active state.
  • Debouncing value changesAll Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
  • AppearanceAll Kendo UI for Angular Inputs enable you to set their dimensions.
  • GlobalizationAll Kendo UI for Angular Inputs provide globalization options.
  • AccessibilityThe Slider is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigationThe Slider supports a number of keyboard shortcuts for processing various commands.

In this article

Not finding the help you need?