Getting Started with the Slider
This guide demonstrates how to get up and running with the Kendo UI for jQuery Slider.
After the completion of this guide, you will be able to achieve the following end result:
<input id="slider">
<script>
$("#slider").kendoSlider({
min: -10,
max: 10,
smallStep: 1,
largeStep: 5
});
</script>
1. Create an Input Element
Create an <input> element on the page, and use it as an initialization element for the Slider.
<input id="slider">
2. Initialize the Slider
In this step, you will initialize the Slider from the <input> element. All settings of the RadioButton will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<input id="slider">
<script>
$("#slider").kendoSlider();
</script>
3. Add Min and Max Values
Next, you can define the minimal and maximum values that will be rendered in the Slider.
<input id="slider">
<script>
$("#slider").kendoSlider({
min: -10,
max: 10,
});
</script>
4. Add the Steps Options
Next, you can configure the smallStep and largeStep options. The smallStep determines the small ticks in the Slider and how the value will be changed when using the keyboard. The largeStep determines the large ticks for each large step and how the value changes when you interact with the PageUp and PageDown keys.
<input id="slider">
<script>
$("#slider").kendoSlider({
min: -10,
max: 10,
smallStep: 1,
largeStep: 5
});
</script>