Slider does not adapt to container width change

[Gary]

Hello,

I am using the slider within a container that resizes as the browser window is resized. The slider does not adapt to the new width, and I don't see a method to redraw it.

Can you provide some guidance on how this can be resolved?

Thanks,
Gary

[Alex Gyoshev]

Hello Gary,

Dynamic resizing of the slider is currently unsupported. The way to resolve this is to re-initialize the slider, by destroying it first ($("#slider-container").empty()) and initializing it again, with the same configuration. We are looking for a more graceful solution of this problem, but for now, use this approach.

Regards,
Alex Gyoshev
the Telerik team

[Katarina]

I use Kendo with jQuery and this is how i resize elements (for now).

Example:

$(this.element).closest('p').find('.pickup_date').empty().width(149).kendoDatePicker({ animation: false, format: "MM/dd/yyyy" });

Here is my full prototype function:

function onChange(e) {

     

    switch (this.value())

    {

        case "range":

            $(this.element).closest('p').children('label').hide();

            $(this.element).closest('.section-content').find('.pickup_date_range_addition').show();

            $(this.element).closest('p').find('.pickup_date').empty().width(149).kendoDatePicker({ animation: false, format: "MM/dd/yyyy" });

            break;

             

        default:

            $(this.element).closest('p').children('label').show();

            $(this.element).closest('.section-content').find('.pickup_date_range_addition').hide();

            $(this.element).closest('p').find('.pickup_date').empty().width(185).kendoDatePicker({ animation: false, format: "MM/dd/yyyy" });

            break;

    }

     

}

 

$(".kdropdown").kendoDropDownList({ animation: false, change: onChange });

[Devi]

Hi

I dont see the slider dynamic resize is supported in the latest version of kendo. Please let me know if it is to be released in the next version.

thanks
swathi

[Jason]

I using this code to set the width initially and it works. But I call the same code on a window resize event and it does nothing. It doesn't resize the slider even though it writes tot eh console the correct width to resize it.

var width = $('#rangeColumn').width();

console.log('width = '+width);

 

$('input[type="range"]').empty().width(width+'px').kendoSlider({showButtons:false,tickPlacement:'none'}); // initialize or resize all sliders

Any idea why the its not working. Am I calling .empty() on the wrong element?

Thanks,
Jason

[Alex Gyoshev]

Hello Jason,

Yes, input elements are always empty, because they do not have any children. You need to clean the container of the slider element, i.e. some element that contains the slider.

Greetings,
Alex Gyoshev
the Telerik team

[Jason]

Thanks Alex. That helped me create this function which is working for me.

Do you see any problems with resizing using this method?

Thanks,
Jason

function resizeRange(element, width, config) {

    var element = $(element);

    var slider = element.parent().parent();

    var parent = slider.parent();

    parent.append(element);

    slider.remove();

    element.width(width).kendoSlider(config);

    element.parent().parent().show(); // not sure why its hidden

}

 

// calling it

resizeRange('#ageRange', '100px', {showButtons:false, tickPlacement:'none'});

[Alex Gyoshev]

I am not sure what you are trying to achieve. Can you please reproduce it in a jsbin sample? Here's a basic one with a slider to get you started.

Kind regards,
Alex Gyoshev
the Telerik team

[JohnVS]

For anyone coming around to this post years later, like I did, you can update the width of a RangeSlider by using this code from the documentation:

$(document).ready(function() {
    $("#rangeslider").kendoRangeSlider();
    var rangeSlider = $("#rangeslider").getKendoRangeSlider();
    rangeSlider.wrapper.css("width", "400px");
    rangeSlider.resize();
});