Telerik UI for Windows 8 HTML

Both RadSlider and RadRangeSlider display a tooltip with the current value of the control while moving the slider. The number shown in the tooltip can be formatted and even templated. This article describes how this can be achieved and what specifics to have in mind.

Configuration

The tooltip is visible by default. You can disable it by setting the enabled property of the tooltip object to false.

HTML Copy imageCopy
<div data-win-control="Telerik.UI.RadSlider" data-win-options="{
    tooltip: {
        enabled: false
    }
}">
</div>
JavaScript Copy imageCopy
var slider = new Telerik.UI.RadSlider(document.getElementById('slider'), { tooltip: {enabled: false} });

To change this after initialization of the control, use the following code:

JavaScript Copy imageCopy
var control = document.getElementById("slider").winControl;
control.tooltip.enabled = false;

Formatting Values

The value of the slider tooltip can be formatted using the format property.

Formatting Values Copy imageCopy
var slider1Ctrl = new Telerik.UI.RadRangeSlider(document.getElementById("slider1"), {
    min: 0,
    max: 2,
    smallStep: 0.1,
    largeStep: 0.5,
    tooltip: {
        format: "{0:N1}"
    }
});

The format string supports a subset of the syntax available in Java and C#. Here "N1" indicates that the value should show one digit after the decimal separator.

Note

If a tooltip template is set, the value of the format property will be ignored and the template will be used instead.

Templates

You could also provide a template for the content of the tooltip. You could assign the template a string value containing HTML and binding expressions. The template provides access to the value.

HTML Copy imageCopy
var slider2Ctrl = new Telerik.UI.RadRangeSlider(document.getElementById("slider2"), {
    min: 0,
    max: 2,
    smallStep: 0.1,
    largeStep: 0.5,
    tooltip: {
        template: '<span >${value}</span>'
    }
});

Tooltip content can also be defined with a the following syntax:

HTML Copy imageCopy
var slider3Ctrl = new Telerik.UI.RadRangeSlider(document.getElementById("slider3"), {
    min: 0,
    max: 2,
    smallStep: 0.1,
    largeStep: 0.5,
    tooltip: {
        template: '<span >#=value#</span>'
    }
});

The binding context of the two slider controls exposes the following information:

  • RadSlider:

    • value: The current value of the slider.

  • RadSlider:

    • selectionStart: The start value of the current range selection.

    • selectionEnd: The end value of the current range selection.