DevExtreme React - Customize Widget Appearance
The RangeSlider can display labels for the min and max values. To configure the labels, use the label object.
JavaScript
$(function(){ $("#rangeSliderContainer").dxRangeSlider({ // . . . label: { visible: true, position: "bottom", // or "top" format: function(value) { return value + " units"; } } }); });
The RangeSlider can also display a tooltip for the slider handles. To configure it, use the tooltip object.
JavaScript
$(function(){ $("#rangeSliderContainer").dxRangeSlider({ // . . . tooltip: { enabled: true, position: "bottom", // or "top" showMode: "always", // or "onHover" format: function(value) { return value + " units"; } } }); });
To specify whether or not the selected range should be highlighted, use the showRange option.
JavaScript
$(function(){ $("#rangeSliderContainer").dxRangeSlider({ // . . . showRange: false }); });
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.