Stretch slider to take whole width

[Anirban]

Is there any style available to make the slider take the entire div width. I have set the div width = 100% . Tried to put a style to the div and also tried to keep the div width to 500px with no much luck. I have tried to use the following style as well: 

       .k-slider .k-slider-horizontal
         {
             width: 400px; 
         }

Here is the slider code : 

             $("#slider").kendoSlider({
                 min: 1990,
                 max: 2010,
                 orientation: "horizontal",
                 smallStep: 1,
                 largeStep: 5,
                 tickPlacement: "bottomRight",
                 showButtons: false
             });

Am I missing something ? 

Please suggest.

Thanks

[sitefinitysteve]

@Telerik I'd also like to know the answer please, was just about to post on this :)

[Anirban]

Okay, I found the solution to it .. Here the css code change that you need to do.. 

.k-slider-horizontal

        {

            display: inline-block;

            float: left;

            width: 650px; <!-- set the width as 100%-->

            height: 26px;

            margin-right: 500px;

        }
Hope this helps

Regards,
Anirban

[John]

Thanks for the fix.  Is there anyway to make this also handle screen resizing?

[JohnVS]

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

$(document).ready(function() {
    $("#slider").kendoSlider();
    var slider = $("#slider").getKendoSlider();
    slider.wrapper.css("width", "400px");
    slider.resize();
});

As far as John's question about screen resizing, you could always wrap this code inside a window resize event listener:

$(window).on('resize', function () {
    var sliders = $("[data-role='slider']");
    sliders.each(function (index, ele) {
        var slider = $(ele).getKendoSlider();
        slider.wrapper.css("width", "100%");
        slider.resize();
    });
});