Customized Slider

2 posts, 0 answers
  1. Rober Rajiv
    Rober Rajiv avatar
    6 posts
    Member since:
    Aug 2009

    Posted 07 Sep 2009 Link to this post

    Hi,

    My initial requirement goes like this:
        1. I want to create a customized horizontal slider of height 30px.
        2. Want to create this as a server control
        3. Need to display a text in the Selected Region
       
    I have created the above slider using customized skin with height 30px and its working fine.
    But if i try to create it as a custom control, i face the following issue:
      The DragHandle is displayed as link with text "Drag", and is displayed below the track. (This works fine if i try without using a server control.). Need some help in this regard.

    And how can i display some text in the SelectedRegion?

    Code Snippet - Custom Control:
    using System; 
    using System.ComponentModel; 
    using System.Globalization; 
    using System.IO; 
    using System.Web; 
    using System.Web.UI; 
    using Telerik.Web.UI; 
     
    namespace MyCustomSlider 
        [ToolboxData("<{0}:WebPlatformSlider runat=server></{0}:WebPlatformSlider>")] 
        public class CustomSlider : RadSlider 
        { 
     
            protected override void OnPreRender(EventArgs e) 
            { 
                base.OnPreRender(e); 
            } 
     
            protected override string CssClassFormatString 
            { 
                get 
                { 
                    return "RadSlider RadSlider_{0}"
                } 
            } 
     
            [Browsable(false)] 
            public override bool EnableEmbeddedSkins 
            { 
                get 
                { 
                    return false
                } 
            } 
     
            [Browsable(false)] 
            public override bool EnableEmbeddedBaseStylesheet 
            { 
                get 
                { 
                    return false
                } 
            } 
     
            [Browsable(true)] 
            public override string Skin 
            { 
                get 
                { 
                    return "Default"
                } 
            } 
     
            [Browsable(false)] 
            public new bool Modal 
            { 
                get 
                { 
                    return true
                } 
            } 
     
        } 
     

    Code Snippet - .aspx page

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="Telerik_SampleSlider.SampleSlider" Theme="Default" %> 
    <%@ Register TagPrefix="tel" Namespace="MyCustomSlider" Assembly="MyCustomSlider" %> 
    <%@ 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"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title></title
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 
        <div> 
        <br /> 
        <br /> 
       <tel:CustomSlider ID="RadSlider1" runat="server" ShowDecreaseHandle="false" ShowIncreaseHandle="false"
       </tel:CustomSlider> 
           </div> 
        </form> 
    </body> 
    </html> 
     



    Slider.Default.css

    .RadSlider_Default div.rslHorizontal 
        height:21px
     
    .RadSlider_Default div.rslHorizontal a.rslHandle 
        width:27px;  
        height:21px
        line-height:21px
     
    .RadSlider_Default div.rslHorizontal a.rslDraghandle 
        width:23px;  
        height:30px
        line-height:30px
        margin-top:-1px
        background-image:url('Slider/dragHandle.JPG'); 
        background-position:0 1px
     
    .RadSlider_Default div.rslHorizontal a.rslDraghandle:hover, 
    .RadSlider_Default div.rslHorizontal a.rslDraghandle:focus, 
    .RadSlider_Default div.rslHorizontal a.rslDraghandle:active 
        background-position:0 1px
         
    .RadSlider_Default div.rslHorizontal div.rslTrack 
        left27px
        top: 0; 
        height19px
        line-height19px
        margin-top0px
        background-color#FFFFFF
        border-topsolid 1px #2c7b90
        border-bottomsolid 1px #024e6e
     
    .RadSlider_Default div.rslHorizontal div.rslSelectedregion 
        height19px
        line-height19px
        background-color#CEEBFF

    Regards,
    Rajiv
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 09 Sep 2009 Link to this post

    Hello Rajiv,
    You need to add a reference to your custom CSS files on your page - you need both the common CSS file as well as the skin-specific one. For example:
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title></title
        <link href="Skin/Slider.css" rel="stylesheet" type="text/css" /> 
        <link href="Skin/Default/Slider.Default.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
        <div> 
            <br /> 
            <br /> 
            <tel:CustomSlider ID="RadSlider1" runat="server" ShowDecreaseHandle="false" ShowIncreaseHandle="false"
            </tel:CustomSlider> 
        </div> 
        </form> 
    </body> 
    </html> 


    Kind 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
Back to Top