1 Answer, 1 is accepted
0
Hello John,
I just answered your support ticket with the same question. I will give the information here as well, so that it is available to all:
***
As the element that indicates the selection is different from the one that represents the track element, you can simply switch the relative style attributes and thus switch the decoration for the two.
For example:
Note that I used "!important" in order to have my styles applied and that I simply copied the background-image url. You can create a custom skin in case you intend to make additional changes to the skin. For information on custom skins, please refer to our online documentation.
***
Kind regards,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I just answered your support ticket with the same question. I will give the information here as well, so that it is available to all:
***
As the element that indicates the selection is different from the one that represents the track element, you can simply switch the relative style attributes and thus switch the decoration for the two.
For example:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .track |
| { |
| background:#E3F9DC url(WebResource.axd?d=Kc8q19hVpV1nLf6Ok-CN-gC4ExDgHNX1C3LBXxCX0U9UrXuCvG11QM1RHFQboZantycA-I8jHqCT4hapQG4pGcVLVUMo_4fPzUnZaEG_P-3S-0dP68yYB-KYQ4FcEQSt0&t=633596893620000000) repeat-x scroll 0 0 !important; |
| border-bottom-color: #4EAB31 !important; |
| } |
| .selectedregion |
| { |
| background: url(WebResource.axd?d=Kc8q19hVpV1nLf6Ok-CN-gC4ExDgHNX1C3LBXxCX0U9UrXuCvG11QM1RHFQboZandIfusQlH2bFhrqAoxBkAzXy3zvoedoFN0jXRkQVvupo1&t=633596893620000000) #a0a0a0 repeat-x !important; |
| border-color: #a0a0a0 !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSlider ID="RadSlider1" runat="server" |
| IsSelectionRangeEnabled="true" Skin="Telerik" |
| SelectionStart="20" SelectionEnd="80" |
| ShowDecreaseHandle="false" ShowIncreaseHandle="false"></telerik:RadSlider> |
| </form> |
| </body> |
Note that I used "!important" in order to have my styles applied and that I simply copied the background-image url. You can create a custom skin in case you intend to make additional changes to the skin. For information on custom skins, please refer to our online documentation.
***
Kind regards,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.