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.common.css';
- 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.common.css';
- 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.common.css';
- 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
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.