Slider Length 100% ?

2 posts, 0 answers
  1. Tim
    Tim avatar
    5 posts
    Member since:
    Aug 2008

    Posted 06 Jan 2009 Link to this post

    To change the length of a slider I would change the Length property to a pixel amount.



    Is there a way to get the slider to stretch to the size of the current div or page?




    both don't seem to work
  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 08 Jan 2009 Link to this post

    Hello Tim,
    First of all, please use Width and Height to set the size of the RadSlider - the Length property is obsolete.

    Now, to your question - the RadSlider does not support size in percent for performance reasons. But in case you need this functionality, you can implement it yourself, using the slider client API. Basically, you need to handle the window.resize event, calculate the new width of the slider's parent element and set the new width to the slider.

    For example:
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" />  
            <script type="text/javascript">     
            function OnClientLoaded()  
                window.setTimeout('ResizeRadSlider()', 0);  
            function ResizeRadSlider()  
                var slider = $find('<%= RadSlider1.ClientID %>');  
                var sliderWrapperElement = $get('RadSliderWrapper_' + slider.get_id());  
                var divElement = $get('sliderParent');  
                // Hide the slider so that you can obtain the correct size of the parent element.  
       = 'none';  
                var newWidth = divElement.offsetWidth;  
       = '';  
                // We are currently reworing the slider client API so that you will no longer need to call repaint when  
                // you set new Width. However, with the current version, you need it.  
            window.onresize = ResizeRadSlider;  
            <div id="sliderParent" style="width: 30%; background-color: Red; overflow: hidden;">  
                <telerik:RadSlider ID="RadSlider1" runat="server" Width="50px"   

    Best wishes,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft R3 2016 release webinar banner
Back to Top