RadSlider Custom Skin

10 posts, 1 answers
  1. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 29 Dec 2011 Link to this post

    if i will need to use 2 different handle for range slider?
    for right and left?
    is it possible?
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 30 Dec 2011 Link to this post

    Omer:

    Your requirement is a bit unclear. Do you want to customize the "DragHandles" or the "DecreaseHandle"/"IncreaseHandle"?

    The handles are actually images and can be manipulated using CSS. Take a look at the Dynamically change draghandle color
    forum thread for insights on how to accomplish this.

    Hope this helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 04 Jan 2012 Link to this post

    Hello 
    Thank you for reply!

    i mean in range slider there is 2 handle.
    left handle and right handle. is it possible to use 2 different image for handles with css.
    there is file selector only one. .RadSlider_MySkin .rslHorizontal a.rslHandle_  

                <--------------------------------------->
    handle.left            track                         handle.right


    regards

  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 04 Jan 2012 Link to this post

    Hi,

    You could have two different handlers for decrease and decrease. Each skin handlers are created with CSS and Sprite Image. So the only thing is to change the sprite image  and to apply different colors to decrease and increase handlers.

    Attached is a sample sprite image showing a changed sprite based on the Forest sprite image. The decrease handlers are modified and their color was changed from green to blue.

    Then you should override the CSS to apply the new sprite to replace the default one:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            div.RadSlider_Forest .rslHorizontal a.rslHandle
            {
                background-image: url(HandlesNew.gif);
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSlider runat="server" ID="RadSlider1" Orientation="Horizontal" Width="500"
            Height="50" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="TopLeft"
            ItemType="Tick" Skin="Forest">
        </telerik:RadSlider>
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 04 Jan 2012 Link to this post

    Thanks, Bozhidar:

    I was able to incorporate two separate images for the handles by manipulating the CSS as follows:

    Default.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
         <style type="text/css">
            div.RadSlider_Black .rslHorizontal .rslDecrease
            {
                background-image: url('images/minus_icon.png') !important;
                width:27px !important;
                height:27px !important;
                background-position: bottom left;
            }
             
            div.RadSlider_Black .rslHorizontal a.rslIncrease
            {
                background-image: url('images/plus_icon.png');
                width:27px !important;
                height:27px !important;
                background-position: bottom left;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadSlider runat="server" ID="RadSlider1"           
                    Value="50" Skin="Black"  >
            </telerik:RadSlider>
        </div>
        </form>
    </body>
    </html>
     See attached images ("minus_icon.png" and "plus_icon.png") and resultant output ("Custom_RadSlider_Handle_Images.png").

    Hope this helps!
  7. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 04 Jan 2012 Link to this post

    hey guys

    sorry for unclear question.
    i mean draghandle!
    is there file selector for 2 different draghandle?
    kindly regards

  8. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 05 Jan 2012 Link to this post

    Hello Omer,

    Note that Telerik does not support custom solutions and even if we try to help we could not be responsible if somethings goes wrong in your custom application.

    In the previous two posts it was explained how you could edit your sprite iamge and CSS in order to achieve different increase and decrease handlers.

    You could use the same approach to edit any of the sprites in the RadSlider control.

    To help you further, attach an image of how you want your Slider to look like, and explain in details your requirements.

    You could also find useful the following tutorial: Create Slider Custom Skin.

    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 05 Jan 2012 Link to this post

    Hello
    Thank you for reply. 
    You can find sample slider in the attachament!

    Regards
    Omer



  10. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 05 Jan 2012 Link to this post

    Hi,

    Attached is SampleSlider.zip containing a small project based on your Slider requirements.

    Greetings,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  11. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 08 Jan 2012 Link to this post

    Bozhidar

    Thank you!

    This is what i want.

    Kindly Regards

    Omer.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017