DevExtreme React - Customize Widget Appearance

The Slider can display labels for the min and max values. To configure the labels, use the label object.

JavaScript
$(function(){
    $("#sliderContainer").dxSlider({
        // . . .
        label: {
            visible: true,
            position: "bottom", // or "top"
            format: function(value) {
                return value + " units";
            }
        }
    });
});

The Slider can also display a tooltip for the slider handle. To configure it, use the tooltip object.

JavaScript
$(function(){
    $("#sliderContainer").dxSlider({
        // . . .
        tooltip: {
            enabled: true,
            position: "bottom", // or "top"
            showMode: "always", // or "onHover"
            format: function(value) {
                return value + " units";
            }
        }
    });
});

To specify whether or not the part of the scale from the beginning to the slider handle should be highlighted, use the showRange option.

JavaScript
$(function(){
    $("#sliderContainer").dxSlider({
        // . . .
        showRange: false
    });
});
See Also