To change the length of a slider I would change the Length property to a pixel amount.
Eg:
Is there a way to get the slider to stretch to the size of the current div or page?
or
both don't seem to work
Eg:
| Length="780" |
Is there a way to get the slider to stretch to the size of the current div or page?
| Length="auto" |
or
| Length="100%" |
both don't seem to work
1 Answer, 1 is accepted
0
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:
Best wishes,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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:
| <body> |
| <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); |
| // 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. |
| 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> |
| </body> |
Best wishes,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.