Dynamically change draghandle color

5 posts, 0 answers
  1. Frank
    Frank avatar
    2 posts
    Member since:
    Mar 2009

    Posted 07 Oct 2009 Link to this post

    I'd like to change the color of the draghandle for each of my slider controls individually.  I'll set a color initially server-side and then dynamically client-side.  Would someone point me to samples and/or a write-up on how to do this, please?  I have several of them in a user control.  I'll be using the Outlook skin.

    Thanks,
    Frank
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 12 Oct 2009 Link to this post

    Hello Frank,
    I am not quite sure what you mean by saying that you want to change the color of the dragHandle of a RadSlider. The dragHandle is actually an image and in case you just want to change the color of that image, you will have to create another image with the necessary color. You can apply this image using the CssClass property of the RadSlider control on the server. For example:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadSlider1.CssClass = "CustomDragHandle";
    }

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .CustomDragHandle .rslHorizontal .rslTrack a.rslDraghandle
            {
                background: url("MyCustomImage.gif") no-repeat 0 0;
            }
        </style>
    </head>
    <body>
        <form id="Form1" method="post" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadSlider ID="RadSlider1" runat="server">
        </telerik:RadSlider>
        </form>
    </body>

    Additionally, you can get a reference to the dragHandle HTML element on the client and set its background-image as inline style the following way:
    <telerik:RadSlider ID="RadSlider1" runat="server" OnClientValueChange="ChangeDragHandleImage">
    </telerik:RadSlider>
    <script type="text/javascript">
    function ChangeDragHandleImage(sender, args)
    {
        if(sender.get_value() > 50)
        {
            var dragHandle = sender.get_dragHandles()[0];
            dragHandle.style.background = 'url("MyCustomImage.gif") no-repeat 0 0';
        }   
    }
    </script>

    Regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Frank
    Frank avatar
    2 posts
    Member since:
    Mar 2009

    Posted 12 Oct 2009 Link to this post

    Thanks Tsvetie...

    I thought it might have to do with changing the draghandle image.  In any case, your examples will be a great help.

    Frank
  5. vinod nagda
    vinod nagda avatar
    33 posts
    Member since:
    May 2010

    Posted 09 Jul 2010 Link to this post

    Hello Friends,

       I am working in Wpf Application in C#.net.
      and i have some problem Regarding Radslider.
      I want to change the image of Radslider dragHandle and apply volumecontrol.png
     Image for DragHandle of RadSlider which i have sent to you.
     Please Help Me
    Thanks In advance
    Vinod
  6. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 15 Jul 2010 Link to this post

    Hello Vinod,

    I assume you have in mind RadSlider for WPF. If so, I've prepared a small project that shows how to replace the original handle with your custom one. Additionally, I'd suggest you have a look at this article, as it explains how to modify the look and feel of our controls.

    Best wishes,
    Kiril Stanoev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017