tooltip Object

Configuration of the Slider tooltip.

tooltip.enabled Boolean(default: true)

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

tooltip.format String(default: "{0:#,#.##}")

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

The slider widget supports precision of up-to 10 digits after the decimals point.

Example - set format according to the precision

<input id="slider" style="width: 300px" />
<script>
  $("#slider").kendoSlider({
    precision: 4,
    smallStep:0.0001,
    largeStep:0.0001,
    min:0,
    max:0.0004,
    value: 0.0002,
    tooltip: {
      format: "{0:#,#.####}"
    }
  });
</script>

tooltip.template String|Function

Template of the tooltip. The following variables are passed by the Slider and are ready to be used inside the template:

• value - the current value when using a regular slider
• selectionStart and selectionEnd - the current values when using a range slider

Example - using RangeSlider template

<div id="rangeslider" class="humidity">
  <input />
  <input />
</div>

<script>
  // the following template definitions are identical and represent the default RangeSlider template

  var templateString = "#= selectionStart # - #= selectionEnd #";
  // or
  // var templateString = "# return selectionStart  + ' - ' + selectionEnd #";

  $("#rangeslider").kendoRangeSlider({
    min: 0,
    max: 100,
    tooltip: {
      template: kendo.template(templateString)
    }
  });
</script>