RadSlider client CSS manipulation

[Bryan Brannon]

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?

[Tsvetie]

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.