After dealing with Kendo's Range Slider control this afternoon, I thought it would be worthwhile to post some sample code for dealing with this control on the client side. Manipulating the RangeSlider on the client side is very simple and straightforward, but there isn't good documentation of this control, which has many properties and methods, so you could wind up spending a lot of time grasping at straws.
Kendo's RangeSlider control:
Kendo's RangeSlider control:
We're creating this control in an ASP.Net MVC project using Razor syntax:
@(Html.Kendo().RangeSlider()
.Name("RangeSlider")
.Max((double)Model.RevenueUpperBound)
.Min((double)Model.RevenueLowerBound)
.Values(Model.MinVal, Model.MaxVal)
.Events(events => events.Change(x => "updateVals")))
But after the page is rendered, we want to programmatically change the start and end points via JavaScript. Looking at the object in FireBug, you can see several promising properties and methods like selectionStart, selectionEnd, bind(), etc... But ultimately, you'll just want to new up a JavaScript array containing the two integer values you want to use as the start and end values.
The example below resets our RangeSlider to a start value of 10 and an end value of 111. (Make sure your start and end values are between the upper and lower boundaries of the control itself).
function resetSlider(){
//Get a handle on our element's RangeSlider
var slider = $('#RangeSlider').data('kendoRangeSlider')
//Feed it an array of two numbers.
slider.value(new Array(10, 111))
}
That's it... As easy as 3.14.
