The tooltip property of the slider widgets can be customized with a custom format or a custom template and can also be disabled completely, if unwanted. For example, imagine that your slider widget is intended for the user to select degrees (such as on a thermometer). You could customize the format of the tooltip to reflect that unique format. You will also see that when changing the format of the tooltip, the format of the data labels will automatically change to match it:

$("#verticalSlider").kendoSlider({
  min: -10,
  max: 20,
  orientation: "vertical",
  smallStep: 2,
  largeStep: 10,
  tickPlacement: "both",
  tooltip: {
    format: "{0}"
  }
});

The default format is "{0}", so by adding the degree symbol after this, it will appear properly on the page:

Notice how the labels and the tooltip both changed to match the new format. Also note that I added the format using a degree symbol that was not HTML encoded, the Kendo UI system handled the appropriate encoding for me.

The full options for configuring the tooltip property are displayed here:

// options for a kendoSlider
tooltip: {
  enabled: true,  // enable tooltips or not
  format: "{0}",  // format string for tooltips
  template:{
    value: "..."  // template value for tooltips
    }
  }
}
...
// options for a kendoRangeSlider
tooltip: {
  enabled: true,  // enabled or not
  format: "{0}",  // format string for tooltips
  template:{
    selectionStart: "...",  // template value for start range
          selectionEnd: "..."  // template value for end range
    }
  }
}

You should not use both a format and a template, since both of those properties are designed to customize the display of the tooltips. The template, as you have seen in previous chapters, would need to follow the normal Kendo template syntax and could be used to create a highly customized tooltip for your slider control.

...
.Tooltip(tt => 
  tt.Enabled(true)
  .Format("{0}")
  .Tempalte("template would go here")) @* misspelled in the Kendo code *@

A slider widget can be configured to start with a specific default value. For a normal Kendo slider widget, this comes in the form of the value property either of the input HTML element or in the initialization of the Kendo slider widget in JavaScript, as shown here:

<input id="sliderId" value="4" />

... // or

$("#sliderId").kendoSlider({
  value: 4,
  ...
}

Either of these methods will set the initial, or default value of the slider widget to the number 4.

For the Kendo range slider, you need to set both of the numbers for the range, so you need to use different properties called selectionStart and selectionEnd or set the value properties of both of the inputs in the HTML:

<div id="rangeSliderId">
  <input value="2" />
  <input value="8" />
</div>

... // or

$("#rangeSliderId").kendoRangeSlider({
  selectionStart: 2,
  selectionEnd: 8
  ...
}

Both of these methods will set the start of the selected range to 2 and the end of the selected range to 8.

Customizing tick placement

The tick marks and data labels on the slider widgets can also be customized by choosing one of four supported options for their display: topLeft, bottomRight, both, and none. These are set through the configuration property called tickPlacement.

$("#sliderId").kendoSlider({
  tickPlacement: "topLeft"
  ...
});

Placing the tick at the top left

The topLeft tick placement option will place the tick marks on the left side of a vertical slider or on the top side of a horizontal slider.

$("#sliderId").kendoSlider({
  tickPlacement: "topLeft"
  ...
});

Here is the output:

Placing the tick at the bottom right

The bottomRight tick placement option will place the tick marks on the right side of a vertical slider or on the bottom side of a horizontal slider:

$("#sliderId").kendoSlider({
  tickPlacement: "bottomRight"
  ...
});

Placing ticks on both sides

The both tick placement option will place the tick marks on both sides of a slider:

$("#sliderId").kendoSlider({
  tickPlacement: "both"
  ...
});

Removing the ticks entirely

The none tick placement option will remove all tick marks from a slider:

$("#sliderId").kendoSlider({
  tickPlacement: "none"
  ...
});

$(function(){
  orientation: "vertical"  // "horizontal" or "vertical"
  ...
}