Custom image in RADSLIDER used as SCROLL BAR

3 posts, 0 answers
  1. BalaVikram
    BalaVikram avatar
    16 posts
    Member since:
    Sep 2007

    Posted 09 Feb 2010 Link to this post

    When we apply CSS to rad slider control ,handle image is not showing fully for example  in mouse over it showing middle part of the image from our image. While dragging up and down it showing up and down region of the image so we can’t use full image.

    Attached image  (scroll Behaviour.jpg) is the image behaviour at various stages, like when dragging top, dragging down and mouse over. We do not want three types of images. We need the same image during all times!!!!

    Attached image (smallScroller.jpg) is the real scroll image that we are using currently and we want to use in RADSlider control for the scroll functionality.

    We are using the RADSlider control and the CSS provided. Please help in finding the issue!!

    Thanks.

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 11 Feb 2010 Link to this post

    Hello BalaVikram,
    In case I understand you correctly, you want the dragHandle of the slider control to look different, depending of the position of the dragHandle on the track. In order to achieve this, you have to handle the load and valueChange client events of the slider and change the CSS class that is applied to the dragHandle element. For example:

    <telerik:RadSlider ID="RadSlider1" runat="server" MinimumValue="0" MaximumValue="100" SmallChange="1"
        Orientation="Vertical" OnClientValueChanged="OnClientValueChanged" OnClientLoad="OnClientValueChanged" CssClass="CustomSlider">
    </telerik:RadSlider>
     
    <script type="text/javascript">
        function OnClientValueChanged(sender,args)
        {
            var dragHandleElement = sender.get_dragHandles()[0];
            Sys.UI.DomElement.removeCssClass(dragHandleElement, "rslTopHandlePosition");
            Sys.UI.DomElement.removeCssClass(dragHandleElement, "rslMiddleHandlePosition");
            Sys.UI.DomElement.removeCssClass(dragHandleElement, "rslBottomHandlePosition");
             
            var newValue = sender.get_value();
            if(newValue <= 25)
            {
                Sys.UI.DomElement.addCssClass(dragHandleElement ,"rslTopHandlePosition");
            }
            else if(newValue < 75)
            {
                Sys.UI.DomElement.addCssClass(dragHandleElement ,"rslMiddleHandlePosition");
            }
            else
            {
                Sys.UI.DomElement.addCssClass(dragHandleElement ,"rslBottomHandlePosition");
            }
        }
    </script>

    I have attached a simple page that demonstrates the approach.


    Greetings,
    Tsvetie
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. BalaVikram
    BalaVikram avatar
    16 posts
    Member since:
    Sep 2007

    Posted 12 Feb 2010 Link to this post

    Thanks.

    The Solution did not work AS IS. I tweaked to make it work. Here is the modifed CSS.



    .CustomSlider div.rslVertical a.rslDraghandle,  
        .CustomSlider div.rslVertical a.rslDraghandle:hover,  
        .CustomSlider div.rslVertical a.rslDraghandle:focus,  
        .CustomSlider div.rslVertical a.rslDraghandle:active  
        {  
            background:url('../Images/smallScroller.png'no-repeat;  
            width:16px;  
            height:25px;  
            margin-left:-3.4px;  
              
        }  
        .CustomSlider div.rslVertical .rslTrack  
    {  
        background:url('../Images/scrollbar_Gallery1.jpg'repeat-y;  
          
    }  
          
        .CustomSlider div.rslVertical a.rslTopHandlePosition,  
        .CustomSlider div.rslVertical a.rslTopHandlePosition:hover,  
        .CustomSlider div.rslVertical a.rslTopHandlePosition:focus,  
        .CustomSlider div.rslVertical a.rslTopHandlePosition:active  
        {  
               
        }  
          
        .CustomSlider div.rslVertical a.rslBottomHandlePosition,  
        .CustomSlider div.rslVertical a.rslBottomHandlePosition:hover,  
        .CustomSlider div.rslVertical a.rslBottomHandlePosition:focus,  
        .CustomSlider div.rslVertical a.rslBottomHandlePosition:active  
        {  
               
        }  
          
        .CustomSlider div.rslVertical a.rslMiddleHandlePosition,  
        .CustomSlider div.rslVertical a.rslMiddleHandlePosition:hover,  
        .CustomSlider div.rslVertical a.rslMiddleHandlePosition:focus,  
        .CustomSlider div.rslVertical a.rslMiddleHandlePosition:active  
        {  
               
        } 
Back to Top