Custom Slider - Right Side Handle Overlap

[Jason Heine]

Hello,

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/360Controls/Handles.png);
    width: 29px;
    height: 25px;
    top:13px;

}

div.RadSlider_BVS div.rslHorizontal a.rslDraghandle
{
    background-image: url(images/360Controls/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/360Controls/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.

[Niko]

Hello Jason,

In order to be most helpful in solving your issue I will need the images you are using as well. Please, provide a sample project enclosing the images, CSS files and a test page so that I can investigate in details.

Greetings,

Nikodim
the Telerik team

[Jason Heine]

Hello,

Yes you can download an example of the issue here:

http://www.certrec.com/_Examples/SliderIssue.zip

You will need to reference the Telerik binary.

Thank you for your help.



Jason

[Niko]

Hello Jason,

There are only minor tweaks that needed to be done in order to make the slider work correctly. Here is what I did:

1. Changed the ItemType property of the RadSlider to Tick. Having a slider with tick items sets the drag handler at the beginning of the track element.
2. Added the top property of the track element to 2px.
3. Removed the margin-left rule for the draghandle

I applied the changes to the project you supplied. You can find it attached in the ticket.

Greetings,

Nikodim
the Telerik team

[Jason Heine]

That is wonderful!! Thank you so much for helping. I've spent so much time tweaking those settings. I really appreciate it.