Stretch slider to take whole width

5 posts, 0 answers
  1. Anirban
    Anirban avatar
    8 posts
    Member since:
    Jun 2011

    Posted 12 Apr 2012 Link to this post

    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
  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 01 May 2012 Link to this post

    @Telerik I'd also like to know the answer please, was just about to post on this :)
  3. Kendo UI is VS 2017 Ready
  4. Anirban
    Anirban avatar
    8 posts
    Member since:
    Jun 2011

    Posted 01 May 2012 Link to this post

    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


  5. John
    John avatar
    11 posts
    Member since:
    Sep 2011

    Posted 19 Oct 2012 Link to this post

    Thanks for the fix.  Is there anyway to make this also handle screen resizing?
  6. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 18 Sep 2014 Link to this post

    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();
        });
    });
Back to Top
Kendo UI is VS 2017 Ready