Re-size the Kendo RangeSlider while Minimize the window of browser

Question

I want to resize the kendo range slider when minimize the window of browser

When browser window is maximize kendo range slider show be like

When browser window is minimize kendo range slider show be like

So, just I want to do that when browser window minimize then kendo range slider should be responsive and hence after minimize the browser window it kendo range slider should be full size.

Here is my code

 var id;
 $(window).resize(function () {
 clearTimeout(id);
 id = setTimeout(doneResizing, 5);
 });

 function doneResizing() {
 var rangeSlider = $("#slider-range").getKendoRangeSlider();
 rangeSlider.wrapper.css("width", "100%");
 rangeSlider.resize();
 }

Answer 1

In my code I binded the Slider in the dataBound Event of a TreeView. This way I initialised this Slider twice, and wasn't able to resize my Slider.

To prevent this double initialization I checked for null on getKendoRangeSlider() on that element if null then make Slider:

var rangeSlider = $("#slider-range").getKendoRangeSlider();

if(rangeSlider == null){
    $("#slider-range").kendoRangeSlider({
        min: 10,
        max: 50,
        orientation: "horizontal",
        smallStep: 1,
        largeStep: 10
    });
}
$(window).on('resize', function () {
  var sliders = $("[data-role='slider']");
  sliders.each(function (index, ele) {
    var slider = $(ele).data("kendoSlider");
    slider.wrapper.css("width", "100%");
    slider.resize();
  });
});

This was also the case for KendoSlider