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

RadSlider client CSS manipulation

1 Answer 89 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Bryan Brannon
Top achievements
Rank 2
Bryan Brannon asked on 03 Dec 2008, 06:26 PM
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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetie
Telerik team
answered on 05 Dec 2008, 06:59 AM
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.
Tags
Slider
Asked by
Bryan Brannon
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
Share this question
or