i want to have two different DragHandle images (say left and right) for range slider. is it possible.?
and other problem i am facing is if i m using two different images for Track images and these images are not the straight line
e.g.
.RadSlider_MySkin
.rslHorizontal .rslTrack
{
background:url('Slider/horz_slider_hover.png') no-repeat;
height:26px;
width:500px;
}
.RadSlider_MySkin
.rslHorizontal .rslSelectedregion
{
background:url('Slider/horz_slider.png') right top no-repeat;
height:26px;
width:500px;
}
and when i drag left side dragHandle, it seems like dragHandle is passing over the main path and that is looking proper but when i drag right side dragHandle, it is not passing over the main path rather it makes main image to move from right to left.
i am attaching Exmp_sliderImg.gif file to make my doubts (or requirements) more clear. In this image, i have specified what exactly i want.
Thanks
3 Answers, 1 is accepted
Basically, the two dragHandles use the same CSS classes and the same styles. You can, however, set a new CSS class for the second dragHandle and apply different styles to that handle, as soon as the slider creates its HTML.
You need to take into account that by default, the slider allows its handles to swap. As a result, you need to make sure that the new CSS class is always applied to the second handle. The easiest way to overcome this problem, is to configure the slider not to allow its handles to swap places. You can use its ThumbsInteractionMode property for that.
For example:
<telerik:RadSlider ID="WoodSlider" runat="server" Height="26px" Width="201px" AnimationDuration="0" MinimumValue="0" MaximumValue="100" Value="30" EnableEmbeddedSkins="false" Skin="Wood" IsSelectionRangeEnabled="true" OnClientValueChanged="OnClientValueChanged" OnClientLoad="OnClientLoad" ThumbsInteractionMode="Lock"></telerik:RadSlider><script type="text/javascript">function OnClientLoad(sender, args){ var secondHandle = $get("RadSliderEndDrag_" + sender.get_id()); Sys.UI.DomElement.addCssClass(secondHandle, "RadSliderEndHandleClass");}</script>.rslDraghandle{ background-color:White;}.RadSliderEndHandleClass{ background-color:Red;}Regarding your second question - you need to change the background-position style of the element that represents the selected region, when you change the position of the left dragHandle. You can use the valueChanged client-side event of the slider for that:
<telerik:RadSlider ID="WoodSlider" runat="server" Height="26px" Width="201px" AnimationDuration="0" MinimumValue="0" MaximumValue="100" Value="30" EnableEmbeddedSkins="false" Skin="Wood" IsSelectionRangeEnabled="true" OnClientValueChanged="OnClientValueChanged" OnClientLoad="OnClientLoad" ThumbsInteractionMode="Lock"></telerik:RadSlider><script type="text/javascript">function OnClientValueChanged(sender, args){ window.setTimeout(function(){ var selectedRegion = $get("RadSliderSelected_WoodSlider"); selectedRegion.style.backgroundPosition = "-" + selectedRegion.style.left + " top"; },0);}</script>Sincerely yours,
Tsvetie
the Telerik team
Rank 1
i have some other issues.
two problems are solved using the solution you have given.
that are
1. now i m having two different images of dragHandle and
2.right dragHandle is moving properly on Track
but 1 problem has occured. now left dragHandle is not moving properly.. after draging left dragHandle and set it at some particular value.. it looks proper.. but does not look proper while draging it. the portion of an image between left and right dragHandels is pulled along with left dragHandle while moving it from right to left.
I am sending the code along with custom and base css..
RangeSlider.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RangeSlider.aspx.cs" Inherits="SlederExmp.RangeSlider" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
<link href="BaseCss_horzRangeSlider.css" rel="Stylesheet" type="text/css" />
<link href="MySkin/Slider.MySkin.css" rel="Stylesheet" type="text/css" />
</head>
<body style="background-color:Black">
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<asp:ScriptManager ID="ScriptManager" runat="server" />
</td>
</tr>
<tr>
<td>
<telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="5" Position="TopCenter"
ShowCallout="false" Height="20px" ShowEvent="fromcode" HideEvent="FromCode">
</telerik:RadToolTip>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function OnClientValueChanging(sender, args)
{
if(!isSliding) return;
var tooltip = $find("<%= RadToolTip1.ClientID %>");
ResetToolTipLocation(tooltip);
tooltip.set_text(args.get_newValue());
}
var isSliding = false;
function OnClientSlideStart(sender, args)
{
isSliding = true;
var tooltip = $find("<%= RadToolTip1.ClientID %>");
ShowRadToolTip(tooltip, sender);
}
function OnClientSlideEnd(sender, args)
{
isSliding = false;
var tooltip = $find("<%= RadToolTip1.ClientID %>");
tooltip.hide();
}
function ShowRadToolTip(tooltip, slider)
{
var activeHandle = slider.get_activeHandle();
if(!activeHandle) return;
tooltip.set_targetControl(activeHandle);
ResetToolTipLocation(tooltip);
}
function ResetToolTipLocation(tooltip)
{
if (!tooltip.isVisible())
tooltip.show();
else
tooltip.updateLocation();
}
function OnClientLoad(sender, args)
{
var secondHandle = $get("RadSliderEndDrag_" + sender.get_id());
Sys.UI.DomElement.addCssClass(secondHandle, "RadSliderEndHandleClass");
}
function OnClientValueChanged(sender, args)
{
window.setTimeout(function(){
var selectedRegion = $get("RadSliderSelected_RadSlider1");
selectedRegion.style.backgroundPosition = "-" + selectedRegion.style.left + " top";
},0);
}
</script>
</telerik:RadCodeBlock>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="color:White; font-size:12px">
$100</td>
<td style="width:3px"></td>
<td>
<telerik:RadSlider runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true" Width="500px" OnClientLoad="OnClientLoad"
MinimumValue="100" MaximumValue="50000" SmallChange="1" SelectionStart="100" SelectionEnd="50000"
OnClientValueChanging="OnClientValueChanging" OnValueChanged="RadSlider1_ValueChanged" ThumbsInteractionMode="Lock"
OnClientSlideStart="OnClientSlideStart" OnClientSlideEnd="OnClientSlideEnd" AutoPostBack="true"
OnClientValueChanged="OnClientValueChanged" ShowDecreaseHandle="false" ShowIncreaseHandle="false"
Skin="MySkin" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"/>
</td>
<td style="width:3px"></td>
<td style="color:White; font-size:12px">
$50000</td>
</tr>
</table><br /><br />
<span style="color:White"> SelectionStart: $</span><asp:Label ID="lblSelectionStart" ForeColor="White" runat="server" Text="0"></asp:Label><br />
<span style="color:White">SelectionEnd: $</span><asp:Label ID="lblSelectionEnd" ForeColor="White" runat="server" Text="300"></asp:Label>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" skin="Black"
Width="600px" AllowPaging="True" PageSize="30" Height="300px" GridLines="None">
<GroupPanel ID="GroupPanel" Style="width:100%;">
</GroupPanel>
<MasterTableView AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1"
TableLayout="Fixed">
<RowIndicatorColumn>
<HeaderStyle Width="20px" BackColor="Black" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" BackColor="Black" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="ProductName" HeaderText="Product" SortExpression="ProductName"
UniqueName="ProductName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CategoryName" HeaderText="Category" SortExpression="CategoryName"
UniqueName="CategoryName">
<HeaderStyle Width="100px" />
<ItemStyle Width="100px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity per unit"
SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="Unit price"
SortExpression="UnitPrice" UniqueName="UnitPrice" DataFormatString="{0:C}">
<HeaderStyle Width="70px" />
<ItemStyle Width="70px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="UnitsInStock" DataType="System.Int16" HeaderText="Units in stock"
SortExpression="UnitsInStock" UniqueName="UnitsInStock">
<HeaderStyle Width="90px" />
<ItemStyle Width="90px" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<FilterMenu EnableTheming="True">
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DemoConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductName], [ProductID], [CategoryName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [products] WHERE (UnitPrice >= @MinimumPrice AND UnitPrice <= @MaximumPrice)">
<SelectParameters>
<asp:ControlParameter ControlID="RadSlider1" PropertyName="SelectionStart" Name="MinimumPrice" />
<asp:ControlParameter ControlID="RadSlider1" PropertyName="SelectionEnd" Name="MaximumPrice" />
</SelectParameters>
</asp:SqlDataSource>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxSettingCreating="RadAjaxManager1_AjaxSettingCreating">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadSlider1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="lblSelectionStart" />
<telerik:AjaxUpdatedControl ControlID="lblSelectionEnd" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
RangeSlider.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Telerik.Web.UI;
namespace SlederExmp
{
public partial class RangeSlider : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void RadSlider1_ValueChanged(object sender, EventArgs e)
{
lblSelectionStart.Text = RadSlider1.SelectionStart.ToString();
lblSelectionEnd.Text = RadSlider1.SelectionEnd.ToString();
RadGrid1.Rebind();
}
protected void RadAjaxManager1_AjaxSettingCreating(object sender, AjaxSettingCreatingEventArgs e)
{
e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}
}
}
BaseCss_horzRangeSlider.css
.RadSlider
{
width:22px;
height:22px;
}
.RadSlider,
.RadSlider .rslItem,
.RadSlider .rslLargeTick span
{
font:normal 10px "Segoe UI", Arial, Verdana;
color:black;
}
.RadSlider .rslTrack
{
z-index:1;
}
.RadSlider .rslDisabled
{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity = 50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity:.5;
opacity:.5;
}
.RadSlider .rslDisabled,
.RadSlider .rslDisabled a,
.RadSlider .rslDisabled li
{
cursor:no-drop;
}
.RadSlider a
{
display:block;
text-indent:-9999px;
overflow:hidden;
text-decoration:none;
text-align:center;
overflow:hidden;
}
.RadSlider a:focus,
.RadSlider a:active
{
outline:none;
}
.RadSlider .rslHandle span,
.RadSlider .rslDraghandle span
.RadSlider .RadSliderEndHandleClass span
{
display:block;
}
.RadSlider .rslHorizontal,
.RadSlider .rslVertical
{
position:relative;
-moz-user-select:none;
font-size:1px;
line-height:1px;
}
.RadSlider .rslHorizontal,
.RadSlider .rslHorizontal a.rslHandle,
.RadSlider .rslHorizontal a.rslDraghandle
.RadSlider .rslHorizontal a.RadSliderEndHandleClass
{
height:35px;
line-height:22px;
}
.RadSlider .rslHorizontal .rslDecrease
{
background-position:0 -22px;
}
.RadSlider .rslHorizontal .rslDecrease:hover
{
background-position:-25px -22px;
}
.RadSlider .rslHorizontal .rslIncrease
{
background-position:-3px 0;
}
.RadSlider .rslHorizontal .rslIncrease:hover
{
background-position:-25px 0;
}
.RadSlider .rslHorizontal a.rslDraghandle
.RadSlider .rslHorizontal a.RadSliderEndHandleClass
{
width:21px;
background-repeat:no-repeat;
}
.RadSlider .rslHorizontal a.rslDraghandle:hover
.RadSlider .rslHorizontal a.RadSliderEndHandleClass:hover
{
background-position:0;
}
.RadSlider .rslHorizontal a.rslDraghandle:focus,
.RadSlider .rslHorizontal a.rslDraghandle:active
.RadSlider .rslHorizontal a.RadSliderEndHandleClass:focus
.RadSlider .rslHorizontal a.RadSliderEndHandleClass:active
{
background-position: 0;
}
.RadSlider .rslHorizontal .rslTrack,
.RadSlider .rslHorizontal .rslSelectedregion
{
height:6px;
line-height:6px;
}
.RadSlider .rslDisabled .rslLiveDragHandle
{
-moz-opacity:1;
opacity:1;
filter:alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.RadSlider .rslVertical,
.RadSlider .rslVertical a.rslHandle,
.RadSlider .rslVertical a.rslDraghandle
{
width:22px;
}
.RadSlider .rslVertical a.rslHandle
{
height:25px;
line-height:25px;
background-repeat:no-repeat;
}
.RadSlider .rslVertical .rslDecrease
{
background-position:0 0;
}
.RadSlider .rslVertical .rslDecrease:hover
{
background-position:0 -28px;
}
.RadSlider .rslVertical .rslIncrease
{
background-position:-22px 3px;
}
.RadSlider .rslVertical .rslIncrease:hover
{
background-position:-22px -25px;
}
.RadSlider .rslVertical .rslTrack,
.RadSlider .rslVertical .rslSelectedregion
{
width:6px;
}
.RadSlider .rslVertical a.rslDraghandle
{
height:8px;
line-height:8px;
margin-left:-8px;
}
* html .RadSliderRTL .rslVertical a.rslDraghandle
{
margin-left:0px;
margin-right:-8px;
left:auto !important;
right:0px;
}
*+html .RadSliderRTL .rslVertical a.rslDraghandle
{
margin-left:0px;
margin-right:-8px;
left:auto !important;
right:0px;
}
.RadSlider .rslVertical a.rslDraghandle:hover
{
background-position:0 -9px;
}
.RadSlider .rslVertical a.rslDraghandle:focus,
.RadSlider .rslVertical a.rslDraghandle:active
{
background-position:0 -18px;
}
.RadSlider .rslItemsWrapper,
.RadSlider .rslItem,
.RadSlider .rslLargeTick,
.RadSlider .rslSmallTick
{
margin:0px;
padding:0px;
list-style:none !important;
}
.RadSlider .rslItem span,
.RadSlider .rslLargeTick span
{
font-size:11px;
}
.RadSlider .rslVertical .rslItemsWrapper .rslItemFirst,
.RadSlider .rslHorizontal .rslItemsWrapper .rslItemFirst
{
background-image:none;
}
.RadSlider .rslItem
{
text-overflow:ellipsis;
overflow:hidden;
cursor:default;
background-repeat:no-repeat;
}
.RadSlider .rslHorizontal .rslItem
{
text-align:center;
}
.RadSlider .rslItemsWrapper li.rslItemDisabled
{
color:#d0d0ce;
}
.RadSlider .rslMiddle .rslItem,
.RadSlider .rslLeft .rslLargeTick,
.RadSlider .rslLeft .rslSmallTick
{
background-position:left center;
}
.RadSlider .rslTop .rslItem
{
background-position:left top;
}
.RadSlider .rslBottom .rslItem
{
background-position:left bottom;
}
.RadSlider .rslCenter .rslItem,
.RadSlider .rslTop .rslLargeTick,
.RadSlider .rslTop .rslSmallTick
{
background-position:center top;
}
.RadSlider .rslLeft .rslItem
{
background-position:left top;
}
.RadSlider .rslRight .rslItem
{
background-position:right top;
}
.RadSlider .rslLargeTick,
.RadSlider .rslSmallTick
{
cursor:default;
position:relative;
background-repeat:no-repeat;
}
.RadSlider .rslCenter .rslLargeTick,
.RadSlider .rslCenter .rslSmallTick,
.RadSlider .rslMiddle .rslLargeTick,
.RadSlider .rslMiddle .rslSmallTick
{
background-position:center center;
}
.RadSlider .rslRight .rslLargeTick,
.RadSlider .rslRight .rslSmallTick
{
background-position:right center;
}
.RadSlider .rslBottom .rslLargeTick,
.RadSlider .rslBottom .rslSmallTick
{
background-position:center bottom;
}
.RadSlider .rslLiveDragHandleActive
{
opacity:0.4;
filter:alpha(opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
.RadSlider .rslLiveDragHandle
{
-moz-opacity:0;
opacity:0;
filter:alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.RadSlider .rslHandle,
.RadSlider .rslDraghandle,
.RadSlider .rslTrack,
.RadSlider .rslSelectedregion,
.RadSlider .rslItemsWrapper,
.RadSlider .rslLargeTick span
{
position:absolute;
top:0;
left:0;
}
.RadSlider .rslHorizontal .rslTrack,
.RadSlider .rslHorizontal .rslSelectedregion
.RadSlider .rslHorizontal .rslItemsWrapper
{
left:25px;
}
.RadSlider .rslVertical .rslTrack,
.RadSlider .rslVertical .rslItemsWrapper
{
top:25px;
}
.RadSlider .rslHorizontal .rslIncrease,
.RadSlider .rslRight .rslHandle,
.RadSlider .rslLeft .rslItemsWrapper,
.RadSlider .rslLeft .rslLargeTick span,
.RadSlider .rslVertical .rslLargeTick span.rslBRItemText
{
left:auto;
right:0;
}
.RadSlider .rslTop .rslItemsWrapper,
.RadSlider .rslBottom .rslHandle,
.RadSlider .rslVertical .rslIncrease,
.RadSlider .rslTop .rslLargeTick span,
.RadSlider .rslHorizontal .rslLargeTick span.rslBRItemText
{
top:auto;
bottom:0;
}
.RadSlider .rslHorizontal .rslSelectedregion
.RadSlider .rslHorizontal .rslTrack
{
top:8px;
}
.RadSlider .rslBottom div.rslTrack
{
top:auto;
bottom:8px;
}
.RadSlider .rslVertical .rslTrack
{
left:8px;
}
.RadSlider .rslRight div.rslTrack
{
left:auto;
right:8px;
}
.RadSlider .rslMiddle .rslTrack,
.RadSlider .rslMiddle .rslHandle
{
top:50%;
}
.RadSlider .rslCenter .rslTrack,
.RadSlider .rslCenter .rslHandle
{
left:50%;
}
* html .RadSliderRTL .rslCenter .rslTrack,
* html .RadSliderRTL .rslCenter .rslHandle
{
right:50%;
}
*+html .RadSliderRTL .rslCenter .rslTrack,
*+html .RadSliderRTL .rslCenter .rslHandle
{
right:50%;
}
.RadSlider .rslMiddle a.rslHandle
{
margin-top:-11px;
}
.RadSlider .rslMiddle div.rslTrack
{
margin-top:-3px;
}
.RadSlider .rslCenter a.rslHandle
{
margin-left:-11px;
}
* html .RadSliderRTL .rslCenter a.rslHandle
{
margin-left:0;
margin-right:-11px;
}
*+html .RadSliderRTL .rslCenter a.rslHandle
{
margin-left:0;
margin-right:-11px;
}
.RadSlider .rslCenter div.rslTrack
{
margin-left:-3px;
}
* html .RadSliderRTL .rslCenter div.rslTrack
{
margin-left:0;
margin-right:-3px;
}
*+html .RadSliderRTL .rslCenter div.rslTrack
{
margin-left:0;
margin-right:-3px;
}
.RadSlider .rslHorizontal .rslItem,
.RadSlider .rslHorizontal .rslLargeTick,
.RadSlider .rslHorizontal .rslSmallTick
{
float:left;
}
.RadSlider .rslLargeTick span
{
white-space:nowrap;
}
.RadSlider .rslHorizontal .rslLargeTick span
{
width:100%;
text-align:center;
}
.RadSlider .rslVertical .rslLargeTick span
{
height:100%;
}
.RadSlider .rslHorizontal .rslSmallTick,
.RadSlider .rslHorizontal .rslLargeTick
{
width:1px;
}
.RadSlider .rslVertical .rslSmallTick,
.RadSlider .rslVertical .rslLargeTick
{
height:1px;
}
* html .RadSlider .rslLargeTick
{
vertical-align:middle;
}
*+html .RadSlider .rslLargeTick
{
vertical-align:middle;
}
Slider.MySkin.css
.RadSlider_MySkin .rslHorizontal a.rslHandle
{
background-image:url('Slider/Slider/Handles.gif');
}
.RadSlider_MySkin .rslHorizontal a.rslDraghandle
{
background-image:url('Slider/horz_DragHandle_left.png');
width:21px;
height:35px;
}
.RadSlider_MySkin .rslHorizontal a.RadSliderEndHandleClass
{
background-image:url('Slider/horz_DragHandle_right.png');
width:21px;
height:35px;
}
.RadSlider_MySkin .rslHorizontal .rslTrack
{
background:url('Slider/horz_slider_hover.png') no-repeat;
height:26px;
width:500px;
}
.RadSlider_MySkin .rslHorizontal .rslSelectedregion
{
background:url('Slider/horz_slider.png') no-repeat;
height:26px;
width:500px;
}
.RadSlider_MySkin .rslVertical a.rslHandle
{
background-image:url('Slider/HandlesVertical.gif');
}
.RadSlider_MySkin .rslVertical .rslTrack
{
background:url('Slider/slider_line.png') repeat-y;
width:22px;
top:18px !important;
}
.RadSlider_MySkin .rslVertical .rslSelectedregion
{
background:url('Slider/slider_line.png') left bottom no-repeat;
}
.RadSlider_MySkin .rslVertical a.rslDraghandle
{
background:url('Slider/dragHandler.png') no-repeat;
width:22px;
height:13px;
}
.RadSlider_MySkin .rslVertical a.rslDraghandle:hover
{
background:url('Slider/dragHandler.png') no-repeat;
width:22px;
height:13px;
background-position:1px;
}
.RadSlider_MySkin .rslVertical a.rslDraghandle:focus
{
background:url('Slider/dragHandler.png') no-repeat;
width:22px;
height:13px;
background-position:1px;
}
.RadSlider_MySkin .rslVertical a.rslDraghandle:active
{
background:url('Slider/dragHandler.png') no-repeat;
width:22px;
height:13px;
background-position:1px;
}
.RadSlider_MySkin .rslItem,
.RadSlider_MySkin .rslLargeTick span
{
color:#333;
}
.RadSlider_MySkin .rslItemsWrapper .rslItemSelected
{
color:#000;
top:38px !important;
}
.RadSlider_MySkin .rslHorizontal .rslItem
{
background-image:url('Slider/ItemHorizontalBgr.gif');
}
.RadSlider_MySkin .rslVertical .rslItem
{
background-image:url('Slider/ItemVerticalBgr.gif');
}
.RadSlider_MySkin .rslTop .rslSmallTick,
.RadSlider_MySkin .rslBottom .rslSmallTick
{
background-image:url('Slider/SmallChangeHorizontal.gif');
}
.RadSlider_MySkin .rslTop .rslLargeTick,
.RadSlider_MySkin .rslBottom .rslLargeTick
{
background-image:url('Slider/LargeChangeHorizontal.gif');
}
.RadSlider_MySkin .rslLeft .rslSmallTick,
.RadSlider_MySkin .rslRight .rslSmallTick
{
background-image:url('Slider/SmallChangeVertical.gif');
}
.RadSlider_MySkin .rslLeft .rslLargeTick,
.RadSlider_MySkin .rslRight .rslLargeTick
{
background-image:url('Slider/LargelChangeVertical.gif');
}
.RadSlider_MySkin .rslMiddle .rslSmallTick
{
background-image:url('Slider/SmallChangeMiddleHorizontal.gif');
}
.RadSlider_MySkin .rslMiddle .rslLargeTick
{
background-image:url('Slider/LargeChangeMiddleHorizontal.gif');
}
.RadSlider_MySkin .rslCenter .rslSmallTick
{
background-image:url('Slider/SmallChangeCenterVertical.gif');
}
.RadSlider_MySkin .rslCenter .rslLargeTick
{
background-image:url('Slider/LargelChangeCenterVertical.gif');
}
thank you
kamini
I was not able to reproduce the problem using your code, but I do have a suggestion for you. I noticed that your CSS is not correct. For example:
.RadSlider .rslHorizontal a.rslDraghandle:hover.RadSlider .rslHorizontal a.RadSliderEndHandleClass:hover{ background-position:0;} .RadSlider .rslHorizontal a.rslDraghandle:focus,.RadSlider .rslHorizontal a.rslDraghandle:active.RadSlider .rslHorizontal a.RadSliderEndHandleClass:focus.RadSlider .rslHorizontal a.RadSliderEndHandleClass:active{ background-position: 0;}You have to separate every selector with a comma from the previous one. The above code fragment should look like the following:
.RadSlider .rslHorizontal a.rslDraghandle:hover,.RadSlider .rslHorizontal a.RadSliderEndHandleClass:hover{ background-position:0;} .RadSlider .rslHorizontal a.rslDraghandle:focus,.RadSlider .rslHorizontal a.rslDraghandle:active,.RadSlider .rslHorizontal a.RadSliderEndHandleClass:focus,.RadSlider .rslHorizontal a.RadSliderEndHandleClass:active{ background-position: 0;}Please make sure that your HTML and CSS are valid.
In case this does not help you , please open a formal support ticket and send me a running test project that demonstrates the problem you have.
Sincerely yours,
Tsvetie
the Telerik team