tooltipObject
Configuration of the RangeSlider tooltip.
Example
<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.enabledBoolean(default: true)
Disables (false) or enables (true) the tooltip of the RangeSlider.
Example
<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.formatString(default: "{0}")
Format string for the text of the tooltip. Note: The applied format will also influence the appearance of the RangeSlider tick labels.
Example
<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.templateString
Template of the tooltip.
- selectionStart - the current selectionStart.
- selectionEnd - the current selectionEnd.
Example
<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>In this article