slider Skin

10 posts, 1 answers
  1. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 15 Jul 2010 Link to this post

    I have the following css file for my slider :
    /* RadSlider for ASP.NET AJAX Default Skin */
      
    .RadSlider .rslTrack
    {
        border-color:#b9b9b9 #939393 #939393 #b9b9b9;
        height:400px;
      
      
    }
      
    .RadSlider .rslHorizontal a.rslHandle
    {
        background-image:url('Slider/Handles.gif');
              
    }
      
    .RadSlider .rslHorizontal a.rslDraghandle
    {
        background-image:url('Slider/DragHandle.gif');
              
    }
      
    .RadSlider .rslTop a.rslDraghandle
    {
        background-image:url('Slider/DragHandleDown.gif');
              
    }
      
    .RadSlider .rslHorizontal .rslTrack
    {
        background:url('Slider/TrackBgr.gif') repeat-x;
          
    }
      
    .RadSlider .rslHorizontal .rslSelectedregion
    {
        background:url('Slider/SelectedRegionHorizontalBgr.gif') right top no-repeat;
              
    }
      
    /* vertical slider */
    .RadSlider .rslVertical
    { 
      
    }
      
    .RadSlider .rslVertical a.rslHandle
    {
      
        background-image:url('Slider/HandlesVertical.gif');
    }
      
    .RadSlider .rslVertical .rslTrack
    {
        height:500px;
       
        background: url('Slider/TrackVerticalBgr.gif') repeat-y ;
          
    }
      
    .RadSlider .rslVertical .rslSelectedregion
    {
       height:100px;
        background:url('Slider/SelectedRegionVerticalBgr.gif') left bottom no-repeat;
    }
      
    .RadSlider .rslVertical a.rslDraghandle
    {
         
        background:url('Slider/DragVerticalHandle.gif') no-repeat;
    }
      
    .RadSlider .rslLeft a.rslDraghandle
    {   
        background:url('Slider/DragVerticalHandleRight.gif') no-repeat;
    }
      
    .RadSlider .rslItem,
    .RadSlider .rslLargeTick span
    {   
        color:#333;
          
    }
      
    .RadSlider .rslItemsWrapper .rslItemSelected
    {   
        color:#000;
    }
      
    /* horizontal slider items */
    .RadSlider .rslHorizontal .rslItem
    {   
        background-image:url('Slider/ItemHorizontalBgr.gif');
    }
      
    /* vertical slider items */
    .RadSlider .rslVertical .rslItem
    {
          
        background-image:url('Slider/ItemVerticalBgr.gif');
    }
      
    /* horizontal slider - TrackPosition=Top/Bottom */
    .RadSlider .rslTop .rslSmallTick,
    .RadSlider .rslBottom .rslSmallTick
    {   
        background-image:url('Slider/SmallChangeHorizontal.gif');
    }
      
    .RadSlider .rslTop .rslLargeTick,
    .RadSlider .rslBottom .rslLargeTick
    {   
        background-image:url('Slider/LargeChangeHorizontal.gif');
    }
      
    /* vertical slider - TrackPosition=Left/Right */
    .RadSlider .rslLeft .rslSmallTick,
    .RadSlider .rslRight .rslSmallTick
    { 
        background-image:url('Slider/SmallChangeVertical.gif');
    }
      
    .RadSlider .rslLeft .rslLargeTick,
    .RadSlider .rslRight .rslLargeTick 
    {   
        background-image:url('Slider/LargelChangeVertical.gif');
    }
      
    /* horizontal slider - TrackPosition=Center */
    .RadSlider .rslMiddle .rslSmallTick
    {   
        background-image:url('Slider/SmallChangeMiddleHorizontal.gif');
    }
      
    .RadSlider .rslMiddle .rslLargeTick  
    {   
        background-image:url('Slider/LargeChangeMiddleHorizontal.gif');
    }
      
    /* vertical slider - TrackPosition=Center */
    .RadSlider .rslCenter .rslSmallTick
    {   
        background-image:url('Slider/SmallChangeCenterVertical.gif');
    }
      
    .RadSlider .rslCenter .rslLargeTick
    {   
        background-image:url('Slider/LargelChangeCenterVertical.gif');
    }
      
      
     DIV.RadSlider .rslTrack {
      
      
        WIDTH: 500px;
      
    }


    How can i change it's height?i tried to add height:500px; in several places but nothing worked
  2.
  3. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 15 Jul 2010 Link to this post

    Hello Maha,

    I am afraid I am not quite sure what you want to achieve with the height of RadSlider. Please find a sample code, showing how to change the .rslTrack class height. I put red border to it, to show the real size of the element.

    <!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">
            /* RadSlider for ASP.NET AJAX Default Skin */
            .RadSlider .rslTrack
            {
                border-color: #b9b9b9 #939393 #939393 #b9b9b9;
                width: 500px !important;
                border: 1px solid red !important;
                height: 500px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div style="padding-top: 40px;">
            <telerik:RadSlider runat="server" TrackPosition="BottomRight" Value="0" ItemType="Item"
                AutoPostBack="true" ID="FinanceSlider" Width="500" Height="500">
                <Items>
                    <telerik:RadSliderItem Value="0" />
                    <telerik:RadSliderItem Value="1" />
                </Items>
            </telerik:RadSlider>
        </div>
        </form>
    </body>
    </html>

    Please, note, that if you put CSS in the header section of the document, you should use the !important rule to apply it, otherwise, it will be overwritten by the base and skin specific style sheets.

    If the suggested solution is not what you want, please send me an image with the design, that you want to apply to RadSlider, and I will give you more detailed explanation how to achieve it.

    Attached is sliderheight.gif showing the result from the above code.

    Regards,
    Bojo
    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
  5. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 15 Jul 2010 Link to this post

    This what i have added as u mentioned :

    .RadSlider .rslTrack
            {
                border-color: #b9b9b9 #939393 #939393 #b9b9b9;
             border: 1px solid red !important;
      
         
                height: 250px !important;
            }


    And this result is in the image slider attached.As you can see i need to increase the height between the buttons.how can i do that?
    I tried to add this

    .RadSlider

     

    .rslVertical a.rslHandle

     

    {

     

     

    height: 250px !important;

     

     

    background-image:url('Slider/HandlesVertical.gif');

     

    }

      but it didnt give me what i want,the result image is slider2
  7. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 15 Jul 2010 Link to this post

    Hi Maha,

    If you want to have vertical slider,  in general case, you should not use CSS styles to set the height/width, but to use RadSlider's height and width properties. I have set for you a simple page with three different sliders in vertical position, and correctly positioned buttons. In yellow I have marked the properties and their values:

    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div style="float: left; margin-right: 40px;">
            <telerik:RadSlider ID="RadSlider_Items" runat="server" ItemType="item" Width="70px"
                Height="350px" AnimationDuration="400" CssClass="ItemsSlider" ThumbsInteractionMode="Free"
                Orientation="Vertical">
                <Items>
                    <telerik:RadSliderItem Text="Jan" Value="1" />
                    <telerik:RadSliderItem Text="Feb" Value="2" />
                    <telerik:RadSliderItem Text="Mar" Value="3" />
                    <telerik:RadSliderItem Text="Apr" Value="4" />
                    <telerik:RadSliderItem Text="May" Value="5" />
                    <telerik:RadSliderItem Text="Jun" Value="6" />
                    <telerik:RadSliderItem Text="Jul" Value="7" />
                    <telerik:RadSliderItem Text="Aug" Value="8" />
                    <telerik:RadSliderItem Text="Sep" Value="9" />
                    <telerik:RadSliderItem Text="Oct" Value="10" />
                    <telerik:RadSliderItem Text="Nov" Value="11" />
                    <telerik:RadSliderItem Text="Dec" Value="12" />
                </Items>
            </telerik:RadSlider>
        </div>
        <div style="float: left; margin-right: 40px;">
            <telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100"
                SmallChange="5" LargeChange="10" ItemType="tick" Height="350px" Width="50px"
                AnimationDuration="400" CssClass="TicksSlider" ThumbsInteractionMode="Free" Orientation="Vertical">
            </telerik:RadSlider>
        </div>
        <div style="float: left;">
            <telerik:RadSlider ID="RadSlider_NoItems" runat="server" Height="350px" Width="50px"
                AnimationDuration="400" ThumbsInteractionMode="Free" Orientation="Vertical">
            </telerik:RadSlider>
        </div>
        </form>
    </body>
    </html>

    Please, find attached verticalslider.gif showing the result form the code above in the browser.
    If you are using custom CSS, and you can not set the height property correctly, send us a fully working project with CSS, Images and HTML included, so we will be able to investigate it further.

    Sincerely yours,
    Bojo
    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
  9. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    I am not using a radslider explicitly I am using a RadDataPager with PageSliderField :

     

    <telerik:RadDataPager ID="RadDataPager1" runat="server"

     

     

    PagedControlID="RadListView1" PageSize="12" Height="264px" >

     

     

     

    <Fields >

     

     

     

    <telerik:RadDataPagerSliderField SliderDragText="" SliderDecreaseText="" SliderIncreaseText="" SliderOrientation ="Vertical" />

     

     

     

    </Fields>

     

     

     

    </telerik:RadDataPager>

     



    And i cannot set the PagerSliderField height, and even by setting the datapager height the slider is not affected and is staying the same.I really need to be able to customize it and couldnt figure it how.You can check also my other post where i tried to put custom skin for both RadDataPager and RadSlider but couldnt make it so now i am using the default skin but changing some of it's css classes

    http://www.telerik.com/community/forums/aspnet-ajax/listview/raddatapager-skin.aspx
  11. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 16 Jul 2010 Link to this post

    Hello Maha,

    Please, find  a sample project with your code. It was necessary to make some small changes to be able to run it. I have tested it with Firefox, IE6, IE7, IE8, Opera and Safari and I cannot reproduce your problem.

    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadListView ID="RadListView1" runat="server">
            <ItemTemplate>
                <span></span>
            </ItemTemplate>
        </telerik:RadListView>
        <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
            PageSize="12" Height="264px">
            <Fields>
                <telerik:RadDataPagerSliderField SliderDragText="" SliderDecreaseText="" SliderIncreaseText=""
                    SliderOrientation="Vertical" />
            </Fields>
        </telerik:RadDataPager>
        </form>
    </body>
    </html>

    And code behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class BugAndTickets_RadSliderTrackDown_Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadListView1.DataSource = new string[] { "1", "2", "3", "1", "2", "3", "1", "2", "3", "1", "2", "3" };
            RadListView1.DataBind();
        }
    }

    Attached is verticalslider.gif showing the result in the browser.

    Please, send us a working project where the problem exists and we will be able to investigate it further.
    Do not forget to include the markup for the RadListView control, because the issue might come from the item template, that you are using.

    Regards,
    Bojo
    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
  13. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    try to add this to ur page


    .RadDataPager_Default

    {

     

    border:none;

     

     

    background-color:Transparent;

     

     

    width:5px;

     

     

    padding-left : 20px;

     

     

    min-height:200px;

     

    }

     

     

    .RadDataPager_Default

     

    .rdpSliderLabel

     

    {

     

    display: none ;

     

     

    }

    .RadSlider_Default

     

    .rslTrack

     

    {

     

    border-color: #b9b9b9 #939393 #939393 #b9b9b9;

     

     

    border: 1px solid red !important;

     

     

     

    height: 250px !important;

     

    }

    .RadSlider_Default

     

    .rslVertical a.rslHandle

     

    {

     

     

     

    background-image:url('Slider/HandlesVertical.gif');

     

    }

    .RadSlider_Default

     

    .rslVertical a.rslDraghandle

     

    {

     

     

    background:url('Slider/DragVerticalHandleRight.gif') no-repeat;

     

    }




    and u will get what am getting as in slider2 img
  14.
  15. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 16 Jul 2010 Link to this post

    Hello Maha,

    I succeed to reproduce the problem.
    To fix it, you should add the following CSS in your code, it is marked in yellow:

    <style type="text/css">
            .RadDataPager_Default
            {
                border: none;
                background-color: Transparent;
                width: 5px;
                padding-left: 20px;
                min-height: 200px;
            }
            .RadDataPager_Default .rdpSliderLabel
            {
                display: none;
            }
            .RadSlider_Default .rslTrack
            {
                border-color: #b9b9b9 #939393 #939393 #b9b9b9;
                border: 1px solid red !important;
                height: 250px !important;
            }
            .RadSlider .rslVertical .rslIncrease
            {
                bottom: -100px !important;
            }
            .RadSlider_Default .rslVertical a.rslHandle
            {
                background-image: url('Slider/HandlesVertical.gif');
            }
            .RadSlider_Default .rslVertical a.rslDraghandle
            {
                background: url('Slider/DragVerticalHandleRight.gif') no-repeat;
            }
        </style>

    Please, note that the current value - bottom: -100px, should be changed if you change the .rslTrack height, which is now 250px.

    Attached is verticalslider.gif showing the result after the fix in the above code.

    Regards,
    Bojo
    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
  17. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    Thank u it worked the default rslTrack height is 200 px mine changed to be 250 px so bottom should be -50 px
  19. Sajad
    Sajad avatar
    1 posts
    Member since:
    Jun 2015

    Posted 14 Jun 2015 Link to this post

    this is my DefaultCS.aspx  css in my range slider :

            <div class="pricelist">
               <telerik:RadScriptManager runat="server" ID="RadScriptManager2" />    
    <asp:UpdatePanel ID="UpdatePanel6" runat="server">
    <ContentTemplate>
                        <telerik:RadSlider runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
                            MinimumValue="0" MaximumValue="3900000" SmallChange="1" SelectionStart="0" SelectionEnd="3900000"
                            OnValueChanged="RadSlider1_ValueChanged"
                            OnClientValueChanging="demo.sliderClientValueChanging" 
                            OnClientSlideStart="demo.sliderClientSlideStart" 
                            OnClientSlideEnd="demo.sliderClientSlideEnd" 
                            AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false">
                        </telerik:RadSlider>
            SelectionStart: $<asp:Label ID="lblSelectionStart" runat="server" Text="0"></asp:Label><br />
            SelectionEnd: $<asp:Label ID="lblSelectionEnd" runat="server" Text="300"></asp:Label>
            
            <telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter" 
                ShowCallout="false" Height="20px" ShowEvent="fromcode" HideEvent="FromCode">
            </telerik:RadToolTip>
             
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" >
                <script type="text/javascript">
                    function getToolTip() {
                        return $find("<%= RadToolTip1.ClientID %>");
                    }
                </script>
            </telerik:RadCodeBlock>
            </ContentTemplate>
    </asp:UpdatePanel>
    </div>

    How can i change my below skin?

    http://8pic.ir/images/sqnucdvoqdvk7ameu40s.jpg

    i want to use this skin in my project:

    http://demos.telerik.com/aspnet-ajax/slider/examples/rangeslider/defaultcs.aspx?skin=Glow

  20.
Back to Top