Configuration
Slider API Functions
RangeSlider API Functions
- Description
- View Code
- Configuration
- Methods
- Events
The Slider widget provides a rich input for selecting values or ranges of values. Unlike the plain HTML5 range input, the Slider presents a consistent experience across all browsers and has a rich API and event model.
Getting Started
There are two basic types of Sliders:- Slider, which presents one thumb and two opposing buttons for selecting a single value
- RangeSlider, which present two thumbs for defining a range of values
Slider
Create simple HTML input element (type="range" is optional)
<input id="slider" type="range" />Initialize the Slider using a jQuery selector
$("#slider").kendoSlider();RangeSlider
Create two simple HTML input elements in a div (type="range" is optional)
<div id="rangeSlider">
<input type="range" />
<input type="range" />
</div>Initialize the RangeSlider using a jQuery selector targeting the div
$("#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 Behavior
Many facets of the Slider and RangeSlider behavior can be configured via simple properties, including:- Min/Max values
- Orientation (horizontal or vertical)
- Small/Large step
- Tooltip format/placement
To see a full list of available properties and values, review the Slider Configuration API documentation tab.
Customizing Slider default settings
$("#slider").kendoSlider({
min:10,
max:50,
orientation: "vertical",
smallStep: 1,
largeStep: 10
});No code
slider
-
disable()Disables the slider.Example
var slider = $("#slider").data("kendoSlider"); // disables the slider slider.disable(); -
enable()Enables the slider.Example
var slider = $("#slider").data("kendoSlider"); // enables the slider slider.enable(); -
value(val)The value method gets or sets the value of the slider. The value method accepts a {String} or a {Number} as parameters, and returns a {Nubmer}.Example
var slider = $("#slider").data("kendoSlider"); // Get or sets the value of the slider slider.value();Parameters
-
val
-
rangeslider
-
disable()Disables the rangeSlider.Example
var rangeSlider = $("#rangeSlider").data("kendoRangeSlider"); // disables the rangeSlider rangeSlider.disable(); -
enable()Enables the rangeSlider.Example
var rangeSlider = $("#rangeSlider").data("kendoRangeSlider"); // enables the rangeSlider rangeSlider.enable(); -
values()The values method gets or sets the selection start and end of the RangeSlider. The values method accepts {String}, {Number} or {Array} object as parameters, and returns a {Array} object with start and end selection values.Example
var rangeSider = $("#rangeSlider").data("kendoRangeSlider"); // Get or sets the selection start and end of the rangeSlider rangeSlider.values();
slider
Fires when the slider value changes as a result of selecting a new value with the drag handle, buttons or keyboard.
Event data
-
value: Number - Represents the updated value of the slider.
Fires when the user drags the drag handle to a new position.
Event data
-
value: Number - Represents the value from the current position of the drag handle.
rangeslider
Fires when the rangeSlider value changes as a result of selecting a new value with one of the drag handles or the keyboard.
Event data
-
values: Number - Represents the updated array of values of the first and second drag handle.
Fires when the user drags the drag handle to a new position.
Event data
-
values: Number - Represents an array of values of the current positions of the first and second drag handle.