Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadSlider Custom Skin

9 Answers 107 Views
Slider
This is a migrated thread and some comments may be shown as answers.
omer
Top achievements
Rank 1
omer asked on 29 Dec 2011, 11:55 AM
if i will need to use 2 different handle for range slider?
for right and left?
is it possible?

9 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 30 Dec 2011, 06:08 PM
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.
0
omer
Top achievements
Rank 1
answered on 04 Jan 2012, 11:09 AM
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

0
Bozhidar
Telerik team
answered on 04 Jan 2012, 05:20 PM
HandlesNew.gif
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
0
Richard
Top achievements
Rank 1
answered on 04 Jan 2012, 06:41 PM
icon.png
icon.png
Custom-RadSlider-Handle-Images.png
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!
0
omer
Top achievements
Rank 1
answered on 04 Jan 2012, 06:44 PM
hey guys

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

0
Bozhidar
Telerik team
answered on 05 Jan 2012, 09:06 AM
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
0
omer
Top achievements
Rank 1
answered on 05 Jan 2012, 10:04 AM
telerik.gif
Hello
Thank you for reply. 
You can find sample slider in the attachament!

Regards
Omer



0
Accepted
Bozhidar
Telerik team
answered on 05 Jan 2012, 02:41 PM
SampleSlider.zip
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
0
omer
Top achievements
Rank 1
answered on 08 Jan 2012, 09:38 AM
Bozhidar

Thank you!

This is what i want.

Kindly Regards

Omer.
Tags
Slider
Asked by
omer
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
omer
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or