React RangeSlider - Customize Component Appearance
The RangeSlider can display labels for the min and max values. To configure the labels, use the label object.
jQuery
JavaScript
$(function(){ $("#rangeSliderContainer").dxRangeSlider({ // . . . label: { visible: true, position: "bottom", // or "top" format: function(value) { return value + " units"; } } }); });
Angular
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 ], // ... })
Vue
<template> <DxRangeSlider ... > <DxLabel :visible="true" :format="format" position="bottom" /> <!-- or "top" --> </DxRangeSlider> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxRangeSlider, DxLabel } from 'devextreme-vue/range-slider'; export default { components: { DxRangeSlider, DxLabel }, methods: { format(value) { return value + " units"; } } } </script>
React
import React from 'react'; 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.
jQuery
JavaScript
$(function(){ $("#rangeSliderContainer").dxRangeSlider({ // . . . tooltip: { enabled: true, position: "bottom", // or "top" showMode: "always", // or "onHover" format: function(value) { return value + " units"; } } }); });
Angular
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 ], // ... })
Vue
<template> <DxRangeSlider ... > <DxTooltip :enabled="true" position="bottom" :format="format" show-mode="always" /> <!-- or "onHover" --> </DxRangeSlider> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxRangeSlider, DxTooltip } from 'devextreme-vue/range-slider'; export default { components: { DxRangeSlider, DxTooltip }, methods: { format(value) { return value + " units"; } } } </script>
React
import React from 'react'; 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.
jQuery
JavaScript
$(function(){ $("#rangeSliderContainer").dxRangeSlider({ // . . . showRange: false }); });
Angular
HTML
TypeScript
<dx-range-slider [showRange]="false"> </dx-range-slider>
import { DxRangeSliderModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxRangeSliderModule ], // ... })
Vue
<template> <DxRangeSlider :show-range="false"/> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxRangeSlider } from 'devextreme-vue/range-slider'; export default { components: { DxRangeSlider } } </script>
React
import React from 'react'; 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.