tooltip

New to Kendo UI for jQuery? Start a free 30-day trial

configuration

Configuration of the RangeSlider tooltip.

Object

<div id="rangeslider" style="width: 200px;">
    <input />
    <input />
</div>
<script>
    $("#rangeslider").kendoRangeSlider({
        tooltip: {
            enabled: true,
            format: "Value: {0}%"
        },
        min: 0,
        max: 100,
        selectionStart: 30,
        selectionEnd: 70
    });
</script>

tooltip.enabled

Boolean

Disables (false) or enables (true) the tooltip of the RangeSlider.

Default: true

<div id="rangeslider" style="width: 200px;">
    <input />
    <input />
</div>
<script>
    $("#rangeslider").kendoRangeSlider({
        tooltip: {
            enabled: false
        },
        min: 0,
        max: 100,
        selectionStart: 25,
        selectionEnd: 75
    });
</script>

tooltip.format

String

Format string for the text of the tooltip. Note: The applied format will also influence the appearance of the RangeSlider tick labels.

Default: "{0}"

<div id="rangeslider" style="width: 200px;">
    <input />
    <input />
</div>
<script>
    $("#rangeslider").kendoRangeSlider({
        tooltip: {
            format: "n2"
        },
        min: 0,
        max: 100,
        selectionStart: 12.345,
        selectionEnd: 67.890
    });
</script>

tooltip.template

String

Template of the tooltip.

selectionStart - the current selectionStart.
selectionEnd - the current selectionEnd.

<div id="rangeslider" style="width: 200px;">
    <input />
    <input />
</div>
<script>
    $("#rangeslider").kendoRangeSlider({
        tooltip: {
            template: (data) => `Range: ${data.selectionStart} - ${data.selectionEnd}`
        },
        min: 0,
        max: 100,
        selectionStart: 20,
        selectionEnd: 80
    });
</script>

tooltip

tooltip.enabled

tooltip.format

tooltip.template