New to Kendo UI for jQuery? Start a free 30-day trial
Steps
Updated over 6 months ago
You can configure the way the RangeSlider divides its range and updates the value by using the step options.
Small Steps
To define the small step of the RangeSlider, use the smallStep property. Based on the min and max values, the RangeSlider splits the track into equal ticks.
When the handles are dragged, the RangeSlider value changes with small steps. The smallStep property accepts both integer and float values.
<div id="rangeSlider">
<input />
<input />
</div>
<script>
$("#rangeSlider").kendoRangeSlider({
min: 0,
max: 10,
smallStep: 2
});
</script>Large Step
To define the large step of the RangeSlider, use the largeStep property. The property specifies that every nth step will render a large tick and a label. The largeStep value determines the step with which the RangeSlider will be updated when the Page Up and Page Down arrow keys are pressed. Must be a positive integer.
<div id="rangeSlider">
<input />
<input />
</div>
<script>
$("#rangeSlider").kendoRangeSlider({
min: 0,
max: 12,
smallStep:2,
largeStep:4
});
</script>