The Slider provides a rich input for selecting values or ranges of values. Unlike the HTML5 range input, the Slider presents a consistent experience across browsers and features a rich API and event model.

Getting Started

There are two types of Slider:

  1. Slider, which presents one thumb and two opposing buttons for selecting a single value
  2. RangeSlider, which present two thumbs for defining a range of values

Slider

Create an input element

<input id="slider" />

Initialization of a Slider should occur after the DOM is fully loaded. It is recommended that initialization the Slider occur within a handler is provided to $(document).ready().

Initialize a Slider using a selector within $(document).ready()

$(document).ready(function() {
    $("#slider").kendoSlider();
});

RangeSlider

Create two HTML input elements in a div

<div id="rangeSlider">
    <input />
    <input />
</div>

Initialization of a RangeSlider should occur after the DOM is fully loaded. It is recommended that initialization the RangeSlider occur within a handler is provided to $(document).ready().

Initialize a RangeSlider using a selector within $(document).ready()

$(document).ready(function() {
    $("#rangeSlider").kendoRangeSlider();
});

The RangeSlider requires two inputs to capture both ends of the value range. This benefits scenarios where JavaScript is disabled, in which case users will be presented with two inputs, still allowing them to input a valid range.

Customizing Slider Behaviors

Many facets of the Slider and RangeSlider behavior can be configured through properties, including:

Initialize a Slider and its properties

$("#slider").kendoSlider({
    min: 10,
    max: 50,
    orientation: "vertical",
    smallStep: 1,
    largeStep: 10
});

Accessing an Existing Slider

You can reference an existing Slider instance via jQuery.data(). Once a reference has been established, you can use the API to control its behavior.

Accessing an existing Slider instance

var slider = $("#slider").data("kendoSlider");