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

RangeSlider-DragHandler image

3 Answers 109 Views

General Discussions

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

3 Answers, 1 is accepted

answered on 24 Dec 2010, 02:36 PM

demo_slider.zip

Hi Arun,

Both the handles have the same CSS class applied and thus you could not set different images for them based on the class selector. However, they do have different IDs set and you could use them, e.g as shown below:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<style type="text/css">

#RadSliderDrag_slider

{

background-image: url(DragHandle1.gif) !important;

}

#RadSliderEndDrag_slider

{

background-image: url(DragHandle2.gif) !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager2" runat="server">

</telerik:RadScriptManager>

<telerik:RadSlider ID="slider" runat="server" IsSelectionRangeEnabled="true">

</telerik:RadSlider>

</form>

</body>

</html>

I hope that my reply is helpful and for your convenience I attached a sample demo.

Greetings,
Svetlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 28 Dec 2010, 03:05 PM

Default2.zip

Hi Arun,

I am not sure whether I understood you correctly - as far as I understand you want the slider to look in the same way when it is enabled and when it is disabled. If so, you can use one of the following approaches:

1) Override the rslDisabled CSS class to remove the filter and the opacity
2) You can use javascript to remove this class when you toggle the enable state of the slider

For your convenience I attach a sample page with the first approach. Note, however, that having the same appearance when enabled and disabled might be confusing for the end user.

Regards,
Svetlina
the Telerik team