Hi - We recently had skinned a slider for the Q2 version and was working well, now with the new version and changes to the skinning process we are having major difficulties.
We have created a new skin, with a larger drag-bar 39px and a larger increase/decrease button area than most inbuilt skins of 19px. When we use an inbuilt skin and set our images, it displays the drag-bar over the top of the descrease button. Now obviously because its all layered some sort of margin, or padding or positional change must be made but we just can't find where to put it. No matter what we do it throws all the dimensions out one way or another.
To reiterate the issue, if you imagine below the slider, the dragbar should be positioned ONLY only the track (the **), not overlap the buttons [\/]. We tried putting a margin on the buttons, on the expandbar, fiddling with the track-length.
[/\]
*
*
*
*
[\/]
Thanks very much.
1 Answer, 1 is accepted
The problem you describe is not caused by styles, bur rather by the logical position of the first value of the RadSlider. Please refer to this forum post (http://www.telerik.com/community/forums/aspnet-ajax/slider/how-to-set-the-step-width.aspx) for detailed information on how this position has changed and why it affects the way the slider looks.
You can deal with the situation either by following the solution, described in the forum thread - in this case the dragHandle will not leave the boundaries of the track element, or modify your styles the following way - in this case the dragHandle will still leave the boundaries of the track, but it will not hide the increase/decrease arrows:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .RadSlider_Gray .horizontal a.handle |
| { |
| background-image:url('Handles.gif') !important; |
| width:27px !important; |
| } |
| .RadSlider_Gray .horizontal .decrease |
| { |
| background-position:0 0 !important; |
| } |
| .RadSlider_Gray .horizontal .increase |
| { |
| background-position:-27px 0 !important; |
| } |
| .RadSlider_Gray .horizontal .track, |
| .RadSlider_Gray .horizontal .rslItemsWrapper |
| { |
| left:27px !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> |
| <telerik:RadSlider ID="RadSlider1" runat="server" Skin="Gray"></telerik:RadSlider> |
| </form> |
| </body> |
The result I get when I run that page is the following:
Original slider:
The modification I made to the Handles.gif is that I added some white space between the arrows and the rounded corner for the track element (it is part of the Handles.gif image as well).
For your convenience, I give you the approach with javascript here as well:
| <telerik:RadSlider runat="server" ID="slider1" Width="730" Value="0" |
| MinimumValue="-10" MaximumValue="110" |
| EnableEmbeddedSkins="false" Skin="QSFHome" |
| OnClientLoaded="InitDemoSlider" |
| OnClientValueChange="HandleClientValueChange" |
| OnClientBeforeValueChange="OnClientBeforeValueChange" |
| DecreaseText="View more controls" IncreaseText="View more controls" /> |
| function OnClientBeforeValueChange(sender, args) |
| { |
| // In order for the dragHandle of the slider to never leave the track, |
| // the values from -1 to -10 and from 101 and 110 are not valid values. |
| var newValue = args.get_newValue(); |
| if(newValue < 0) |
| { |
| args.set_cancel(true); |
| sender.set_value(0); |
| } |
| else if(newValue > 100) |
| { |
| args.set_cancel(true); |
| sender.set_value(100); |
| } |
| } |
Regards,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.