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