A newer version of this page is available. Switch to the current version.

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