Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Slider / How to set the Width/Height of RadSlider in percentages

How to set the Width/Height of RadSlider in percentages

Article Info

Rating: 1

Article information

Article relates to

 RadSlider for ASP.NET AJAX 

Created by

 Svetlina, Telerik

HOW-TO:

Set the Width/Height of RadSlider in percentages.

SOLUTION:



The RadSlider control does not support size in percentages because of performance reasons. But in case you need this functionality, you can easily implement it, using the slider client -side 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 as shown below:

  <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.     
            sliderWrapperElement.style.display = 'none';     
            var newWidth = divElement.offsetWidth;     
            sliderWrapperElement.style.display = '';     
                 
            slider.set_width(newWidth);     
              
           //If you are using a version which earlier than the Q3 2008 SP2 version of RadControls   
           //you should also call the repaint() method when setting the size. This is fixed and it is not needed   
           //in the mentioned and later versions  
           // slider.repaint();     
        }     
             
        window.onresize = ResizeRadSlider;     
        </script> 
 
        <div id="sliderParent" style="width: 30%; background-color: Red; overflow: hidden;">  
            <telerik:RadSlider ID="RadSlider1" runat="server" Width="50px" OnClientLoaded="OnClientLoaded">  
            </telerik:RadSlider> 
        </div> 
    </form> 

NOTE:   If you are using a version which is earlier than the Q3 2008 SP2 version of RadControls you should also call the repaint() method when setting the size. This is fixed and it is not needed in the mentioned and later versions.

You can find a sample, fully runnable demo page which shows the described approach in the attached archive file. 

Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.