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
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.