Hello,
I have implemented the RadSlider with a custom design.
The rad slider code is as follows:
Now, I have the following CSS for this slider:
Now, the slider works perfect, other than when I slide the drag handle all the way to the right, the image overlaps the right arrow section. I would like it to stop just before the right arrow section with the right side of the image.
You can see a video of this issue here:
Video of Issue
I have also added copies of the images to the same folder where the video is located if it will help.
Any help will be greatly appreciated.
I have implemented the RadSlider with a custom design.
The rad slider code is as follows:
<
telerik:RadSlider
ID
=
"imageSlider"
runat
=
"server"
Value
=
"0"
ItemType
=
"None"
EnableEmbeddedSkins
=
"false"
Skin
=
"BVS"
Width
=
"860"
Height
=
"25px"
OnClientValueChanged
=
"UpdateVisibleSlide"
OnClientLoad
=
"UpdateVisibleSlide"
>
</
telerik:RadSlider
>
Now, I have the following CSS for this slider:
div.RadSlider_BVS .rslTrack
{
border
:
none
;
}
div.RadSlider_BVS .rslHorizontal a.rslHandle
{
background-image
:
url
(images/
360
Controls/Handles.png);
width
:
29px
;
height
:
25px
;
top
:
13px
;
}
div.RadSlider_BVS div.rslHorizontal a.rslDraghandle
{
background-image
:
url
(images/
360
Controls/DragHandle.png);
width
:
42px
;
height
:
25px
;
margin-top
:
-0px
;
margin-left
:
20px
;
background-repeat
:
no-repeat
;
}
div.RadSlider_BVS .rslHorizontal .rslTrack
{
background-image
:
url
(images/
360
Controls/SliderSlideBackground.png);
background-repeat
:
repeat-x
;
height
:
25px
;
margin-top
:
-9px
;
left
:
29px
;
}
/* styles from the base stylesheet of RadSlider */
div.RadSlider_BVS .rslHorizontal a.rslHandle
{
margin-top
:
-14px
;
height
:
25px
;
width
:
29px
;
line-height
:
16px
;
}
div.RadSlider_BVS .rslHorizontal .rslDecrease
{
background-position
:
0
0
;
}
div.RadSlider_BVS .rslHorizontal .rslDecrease:hover
{
background-position
:
0
0
;
}
div.RadSlider_BVS .rslHorizontal .rslIncrease
{
background-position
:
-29px
0
;
}
div.RadSlider_BVS .rslHorizontal .rslIncrease:hover
{
background-position
:
-29px
0
;
}
div.RadSlider_BVS .rslHorizontal a.rslDraghandle:hover
{
background-position
:
0
0
;
}
div.RadSlider_BVS .rslHorizontal a.rslDraghandle:focus,
div.RadSlider_BVS .rslHorizontal a.rslDraghandle:active
{
background-position
:
0
0
;
}
div.RadSlider_BVS .rslHorizontal .rslTrack,
div.RadSlider_BVS .rslHorizontal .rslSelectedregion
{
height
:
25px
;
line-height
:
13px
;
}
Now, the slider works perfect, other than when I slide the drag handle all the way to the right, the image overlaps the right arrow section. I would like it to stop just before the right arrow section with the right side of the image.
You can see a video of this issue here:
Video of Issue
I have also added copies of the images to the same folder where the video is located if it will help.
Any help will be greatly appreciated.