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

Custom Slider - Right Side Handle Overlap

4 Answers 144 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Jason Heine
Top achievements
Rank 1
Jason Heine asked on 22 Feb 2011, 02:52 AM
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.

4 Answers, 1 is accepted

Sort by
0
Niko
Telerik team
answered on 23 Feb 2011, 06:50 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Jason Heine
Top achievements
Rank 1
answered on 23 Feb 2011, 07:21 PM
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
0
Niko
Telerik team
answered on 24 Feb 2011, 04:02 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Jason Heine
Top achievements
Rank 1
answered on 24 Feb 2011, 05:00 PM
That is wonderful!! Thank you so much for helping. I've spent so much time tweaking those settings. I really appreciate it.
Tags
Slider
Asked by
Jason Heine
Top achievements
Rank 1
Answers by
Niko
Telerik team
Jason Heine
Top achievements
Rank 1
Share this question
or