Change Horizontal SelectedRegion image using Javascript and CSS

[Pradyumna]

Hi,

I would like to change the horizontal selected region image of a slider control on the clientside. I have set to false the EnableEmbeddedSkins property and included a css skin file for the slider control. I see the following class in the css file

.rslHorizontal .rslSelectedregion
{
    background:url(../images/Slider/SelectedRegionHorizontalBgr.gif) right top no-repeat;
}
 But I want to change the image path on a button click.

Any help is appreciated.

[Tsvetie]

Hello Pradyumna,
You can get a reference to the selected region element and change its background image the following way:

<telerik:RadSlider ID="RadSlider1" runat="server" Value="50">
</telerik:RadSlider>
<button onclick="ChangeBackgroundImage();return false;">
    Change</button>
<script type="text/javascript">
    function ChangeBackgroundImage()
    {
        var selectedRegion = $get("RadSliderSelected_<%= RadSlider1.ClientID %>");
        selectedRegion.style.backgroundImage = "url('...')";
    }
</script>

Sincerely yours,
Tsvetie
the Telerik team