Angular RangeSlider - Customize Component Appearance

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

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { RangeSlider, Label } from 'devextreme-react/range-slider';
  •  
  • const format = function(value) {
  • return value + " units";
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <RangeSlider ... >
  • <Label
  • visible={true}
  • format={format}
  • position="bottom" /> {/* or "top" */}
  • </RangeSlider>
  • );
  • }
  • }
  •  
  • export default App;

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

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { RangeSlider, Tooltip } from 'devextreme-react/range-slider';
  •  
  • const format = function(value) {
  • return value + " units";
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <RangeSlider ... >
  • <Tooltip
  • enabled={true}
  • position="bottom"
  • format={format}
  • showMode="always" /> {/* or "onHover" */}
  • </RangeSlider>
  • );
  • }
  • }
  •  
  • export default App;

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

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { RangeSlider } from 'devextreme-react/range-slider';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <RangeSlider showRange={false}/>
  • );
  • }
  • }
  •  
  • export default App;
See Also