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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.