RadSlider Width Issue

[Mohamed]

I Have a RadSlider with that code

<telerik:RadSlider ID="RadSliderResBedrooms" runat="server" ItemType="item" Width="350px"
                                Height="70px" AnimationDuration="400" ThumbsInteractionMode="Free"
                                EnableDragRange="true" IsSelectionRangeEnabled="true" SelectionEnd="12" SelectionStart="0" >
                                <Items>
                                    <telerik:RadSliderItem Text="1" Value="1" Width="100px" />
                                    <telerik:RadSliderItem Text="2" Value="2" />
                                    <telerik:RadSliderItem Text="3" Value="3" />
                                    <telerik:RadSliderItem Text="4" Value="4" />
                                    <telerik:RadSliderItem Text="5" Value="5" />
                                    <telerik:RadSliderItem Text="6" Value="6" />
                                    <telerik:RadSliderItem Text="7" Value="7" />
                                    <telerik:RadSliderItem Text="8" Value="8" />
                                    <telerik:RadSliderItem Text="9" Value="9" />
                                    <telerik:RadSliderItem Text="10" Value="10" />
                                    <telerik:RadSliderItem Text="11" Value="11" />
                                    <telerik:RadSliderItem Text="12" Value="12" />
                                </Items>
                            </telerik:RadSlider>

The problem that its width when the page first loads is very small and looked crashed but after reloading pages it goes 
that's the crashed slider image:
http://i.imgur.com/wWGm0.png

[Slav]

Hi Mohamed,

Most probably the CSS resources of the RadSlider are still being loaded when the control is dynamically added on the page through AJAX. The solution for this problem is to ensure that the styles are already loaded. There are two basic ways to do this:

• Using the GetWebResourceUrl method: 

  <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>' rel="stylesheet" type="text/css" />
   <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Default.Slider.Default.css") %>' rel="stylesheet" type="text/css" />

• Via the RadStyleSheetManager control:

  <telerik:RadStyleSheetManager ID="theStyleSheetManager" runat="server">
      <StyleSheets>
          <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Slider.css" />
          <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Slider.Default.css" />
      </StyleSheets>
  </telerik:RadStyleSheetManager>

You should also disable its embedded base stylesheets and skin so that the control does not try to load the CSS on its own by setting its properties EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins to false.

Greetings,
Slav
the Telerik team