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

slider Skin

9 Answers 135 Views
Slider
This is a migrated thread and some comments may be shown as answers.
maha
Top achievements
Rank 1
maha asked on 15 Jul 2010, 07:26 AM
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

9 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 15 Jul 2010, 08:57 AM
sliderheight.gif
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
0
maha
Top achievements
Rank 1
answered on 15 Jul 2010, 09:57 AM
slider.png
slider2.png
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
0
Bozhidar
Telerik team
answered on 15 Jul 2010, 12:56 PM
verticalslider.gif
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
0
maha
Top achievements
Rank 1
answered on 16 Jul 2010, 07:09 AM
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
0
Bozhidar
Telerik team
answered on 16 Jul 2010, 11:22 AM
verticalslider.gif
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
0
maha
Top achievements
Rank 1
answered on 16 Jul 2010, 12:17 PM
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
0
Accepted
Bozhidar
Telerik team
answered on 16 Jul 2010, 01:52 PM
verticalslider.gif
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
0
maha
Top achievements
Rank 1
answered on 16 Jul 2010, 01:57 PM
Thank u it worked the default rslTrack height is 200 px mine changed to be 250 px so bottom should be -50 px
0
Sajad
Top achievements
Rank 1
answered on 14 Jun 2015, 07:52 PM

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

Tags
Slider
Asked by
maha
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
maha
Top achievements
Rank 1
Sajad
Top achievements
Rank 1
Share this question
or