Slider bar highlight outside

2 posts, 0 answers
  1. John
    John avatar
    10 posts
    Member since:
    Oct 2008

    Posted 16 Oct 2008 Link to this post

    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%.

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 20 Oct 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top