This is a migrated thread and some comments may be shown as answers.

Slider bar highlight outside

1 Answer 23 Views
Slider
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 16 Oct 2008, 06:02 PM
Is it possible to highlight the slider bar on the outsides of the handles, rather than the inside when using IsSelectionRangeEnabled = true?  This effectively would show you are selecting say the Bottom 20% and Top 20%.

1 Answer, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 20 Oct 2008, 07:39 AM
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:
<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  
    {  
        backgroundurl(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.
Tags
Slider
Asked by
John
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Share this question
or