Kendo UI for jQuery Slider Overview
The Slider provides a rich input for selecting numeric values.
The Slider can either present one handle and two opposing buttons for selecting a single numeric value, or two handlers for defining a range of numeric values. Unlike the HTML5 range input, the Slider enables the consistent experience across browsers and delivers rich API calls and event models. The Slider provides configuration options for customizing its behavior, for example, setting its minimum and maximum values, orientation, step, and tooltip format and placement.
The Slider is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Slider
To create the Slider, use an HTML <input> element.
<input id="slider" />
To initialize the Slider, use a jQuery selector.
Verify that you create the Slider within a
$(document).ready()statement because the widget has to be initialized after the DOM fully loads.
$(document).ready(function() {
$("#slider").kendoSlider();
});
The following example demonstrates how to customize the Slider.
$("#slider").kendoSlider({
min: 10,
max: 50,
orientation: "vertical",
smallStep: 1,
largeStep: 10
});
Functionality and Features
The Slider provides accessibility support.
Referencing Existing Instances
To reference an existing Slider instance, use the jQuery.data() method. Once a reference has been established, use the API to control its behavior.
var slider = $("#slider").data("kendoSlider");