React Slider - Customize Component Appearance

The Slider 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.light.css';
  •  
  • import { Slider, Label } from 'devextreme-react/slider';
  •  
  • const format = function(value) {
  • return value + " units";
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Slider>
  • <Label
  • visible={true}
  • format={format}
  • position="bottom" /> {/* or "top" */}
  • </Slider>
  • );
  • }
  • }
  •  
  • export default App;

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

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

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

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