Custom Slider - Right Side Handle Overlap

5 posts, 0 answers
  1. Jason Heine
    Jason Heine avatar
    16 posts
    Member since:
    Apr 2010

    Posted 21 Feb 2011 Link to this post

    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.
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 23 Feb 2011 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason Heine
    Jason Heine avatar
    16 posts
    Member since:
    Apr 2010

    Posted 23 Feb 2011 Link to this post

    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
  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 24 Feb 2011 Link to this post

    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!
  6. Jason Heine
    Jason Heine avatar
    16 posts
    Member since:
    Apr 2010

    Posted 24 Feb 2011 Link to this post

    That is wonderful!! Thank you so much for helping. I've spent so much time tweaking those settings. I really appreciate it.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017