RadSlider client CSS manipulation

2 posts, 1 answers
  1. Bryan Brannon
    Bryan Brannon avatar
    65 posts
    Member since:
    Aug 2012

    Posted 03 Dec 2008 Link to this post

    I have a RadSlider on a page and I want to dynamically (clien-side) change the following:

    From:
    .RadSlider_Default2_Selected .horizontal .track  
    {  
        margin-top:6px;  
        height:3px;  
        background:#fff;  
        border-top:solid 1px #383838;  
        border-bottom:solid 1px #383838;  

    To:
    .RadSlider_Default2_Selected .horizontal .track  
    {  
        margin-top:6px;  
        height:3px;  
        background:red;  
        border-top:solid 1px #383838;  
        border-bottom:solid 1px #383838;  

    basically, change the background of the track to a different color based on a client-side logic.

    FYI, I am using Custom templates so I thought I could create another Slider.Default2_Selected.css theme and just use jQuery on the top level div rendered to change the CSS property:

    $("#RadSlider1").removeClass("radslider RadSlider_Default2 horizontal ");  
    $("#RadSlider1").addClass("radslider RadSlider_Default2_Selected horizontal "); 

    <div id="RadSlider1" class="radslider RadSlider_Default2 horizontal " style="height:20px;width:120px;">
    ....

    Any help?
  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 Dec 2008 Link to this post

    Hello Bryan Brannon,
    The CSS selector that you want to change means the following - aplly the CSS styles to an element with the className "track", which has a prarent with className "horizontal", which in turn has a parent with className "RadSlider_Default2_Selected". Thus, chaging the className of the track element would not lead to the desired style change - the "radslider" and "RadSlider_Default2" CSS classes are applied to one HTML element, and the "horizontal" class is applied to another HTML element.

    In case you want to create your own custom skin, please refer to our online documentation for information how to do this.

    However, in case you just want to change the color of the track, you can do it the following way:
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
     
    <script type="text/javascript">  
    function ChangeTrackColor()  
    {  
        $get('RadSliderTrack_' + $find('RadSlider1').get_id()).style.background = 'red';  
    }  
    </script>  
     
    <button onclick="ChangeTrackColor(); return false;" runat="server">Change color</button>  
    <telerik:RadSlider ID="RadSlider1" runat="server"></telerik:RadSlider> 

    Sincerely yours,
    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