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

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