Slider JSP Tag Overview

The Slider JSP tag is a server-side wrapper for the Kendo UI Slider widget.

Getting Started

The Basics

There are two types of sliders in Kendo UI:

  • Kendo UI Slider, which presents one thumb and two opposing buttons for selecting a single value.
  • Kendo UI RangeSlider, which presents two thumbs for defining a range of values.


Below are listed the steps for you to follow when configuring the Kendo UI Slider in the Spring MVC framework.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for JSP.

Step 2 Create a new action method.

    @RequestMapping(value = { "/", "/index" }, method = RequestMethod.GET)
    public String index() {
        return "web/slider/index";

Step 3 Add the Kendo UI taglib mapping to the page.

    <%@taglib prefix="kendo" uri=""%>

Step 4 Add a slider tag.

    <kendo:slider name="slider" class="temperature" min="0" max="30" smallStep="1" largeStep="10" value="18">

Event Handling

Subscribe to Events

You can subscribe to all events exposed by Kendo UI Slider by the handler name.

  <kendo:slider name="slider" change="sliderOnChange" slide="sliderOnSlide">

      function sliderOnSlide(e) {
        kendoConsole.log("Slide :: new slide value is: " + e.value);

    function sliderOnChange(e) {
        kendoConsole.log("Change :: new value is: " + e.value);


Existing Instances

You are able to reference an existing Slider instance via Once a reference is established, you are able to use the Slider API to control its behavior.

// Put this after your Kendo Slider tag declaration
    $(function() {
        // Notice that the name attribute of the slider is used to get its client-side instance
        var slider = $("#slider").data("kendoSlider");

See Also

In this article