Custom Tooltip kendo ui slider - kendo-ui

Question

Here's a solution for modifying the tooltip of the kendo-ui slider depending on the value:
var text = [];
text.push("Text 1");
text.push("Text 2");
text.push("Text 3");
text.push("Text 4");
$("#slider").kendoSlider({
min: 0,
max: 3,
smallStep: 1,
largeStep: 1,
value: 0,
tooltip: {
enabled: true,
format: text[0], // min-value text
},
slide: function (e) {
e.sender.options.tooltip.format = text[e.value];
}
});
It' a pitty you can't configure the tooltip as with the tooltip-widget.

Answer 1

You're half way there. Lets say you needed to represent minutes and seconds as if you were editing a video. This example is for using a range slider.
Fiddle: http://jsfiddle.net/KjABb/
var text = [];
var templateString = "#= formatToMinutesSeconds(selectionStart) # - #= formatToMinutesSeconds(selectionEnd) #";
var mediaLength = 229; //03:49
function formatToMinutesSeconds(value) {
return text[value];
}
var i = 0;
while (i <= mediaLength) {
var date = new Date(null);
date.setSeconds(i);
var minutesSeconds = kendo.toString(date, "mm:ss");
text.push(minutesSeconds);
i++;
}
$("#clip-editor-slider").kendoRangeSlider({
min: 0,
max: mediaLength,
smallStep: 1,
largeStep: 60,
tickPlacement: "both",
tooltip: {
template: kendo.template(templateString)
}
});

Answer 2

Keep a local variable called _sliderValue. This is an arbitrary name. Call it what you want. In the slider "slide" event handler, set _sliderValue to e.value. Your tooltip template can then access the value stored in the local variable.
var _sliderValue = 0;
var template = kendo.template($("#sliderTemplate").html());
//$("#slider").load(function() {
$("#slider").kendoSlider({
min: 0,
max: 3,
smallStep: 1,
largeStep: 1,
value: 0,
tooltip: {template: template},
slide: function (e) {
_sliderValue = e.value;
}
});
//});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script id="sliderTemplate" type="text/x-kendo-tmpl">
<div>Text #= _sliderValue #</div>
</script>
<div id="slider"></div>