Angular RangeSlider - Customize Component Appearance

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

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

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

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

To specify whether or not the selected range should be highlighted, use the showRange property.

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