Angular Slider - Overview

The Slider is a UI component that allows an end user to set a numeric value on a continuous range of possible values.

View Demo

The following code adds a simple Slider to your page. The min and max properties limit the range of accepted values. The value sets the initial value for the UI component.

HTML
TypeScript
  • <dx-slider
  • [min]="0"
  • [max]="100"
  • [(value)]="value">
  • </dx-slider>
  • import { DxSliderModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • value = 25;
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSliderModule
  • ],
  • // ...
  • })

In addition, you can specify the step of Slider values using the step property.

HTML
TypeScript
  • <dx-slider
  • [min]="0"
  • [max]="100"
  • [step]="10"
  • [(value)]="value">
  • </dx-slider>
  • import { DxSliderModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • value = 25;
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSliderModule
  • ],
  • // ...
  • })
See Also