Angular Slider - Customize Component Appearance

The Slider can display labels for the min and max values. To configure the labels, use the label object.

HTML
TypeScript
  • <dx-slider
  • <dxo-label
  • [visible]="true"
  • [format]="format"
  • position="bottom"> <!-- or "top" -->
  • </dxo-label>
  • </dx-slider>
  • import { DxSliderModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • format = function(value) {
  • return value + " units";
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSliderModule
  • ],
  • // ...
  • })

The Slider can also display a tooltip for the slider handle. To configure it, use the tooltip object.

HTML
TypeScript
  • <dx-slider
  • <dxo-tooltip
  • [enabled]="true"
  • [format]="format"
  • position="bottom"
  • showMode="always"> <!-- or "onHover" -->
  • </dxo-tooltip>
  • </dx-slider>
  • import { DxSliderModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • format = function(value) {
  • return value + " units";
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSliderModule
  • ],
  • // ...
  • })

To specify whether or not the part of the scale from the beginning to the slider handle should be highlighted, use the showRange property.

HTML
TypeScript
  • <dx-slider
  • [showRange]="false"
  • </dx-slider>
  • import { DxSliderModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSliderModule
  • ],
  • // ...
  • })
See Also