Labels for Sliders to be one on top one bottom

2 posts, 0 answers
  1. Elizabeth
    Elizabeth avatar
    4 posts
    Member since:
    Apr 2014

    Posted 28 Jul 2016 Link to this post

    Hi,

    I would like to have Items display one on top, one on bottom, and so forth... for better readability, is possible?

    Boris

  2.
  3. Ianko
    Admin
    Ianko avatar
    1764 posts

    Posted 03 Aug 2016 Link to this post

    Hello Elizabeth,

    There is no built-in option for that. But you can easily achieve such look with plain CSS. For example: 

    <style>
        .rslItemsWrapper .rslItem {
            position: relative;
        }
     
            .rslItemsWrapper .rslItem:nth-child(even) span {
                position: absolute;
                top: 43px;
                left: 3px;
            }
    </style>
     
    <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_Items" runat="server" ItemType="Item" Width="400px"
        Height="70px">
        <Items>
            <telerik:RadSliderItem Text="Jan" Value="1"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Feb" Value="2"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Mar" Value="3"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Apr" Value="4"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="May" Value="5"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Jun" Value="6"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Jul" Value="7"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Aug" Value="8"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Sep" Value="9"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Oct" Value="10"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Nov" Value="11"></telerik:RadSliderItem>
            <telerik:RadSliderItem Text="Dec" Value="12"></telerik:RadSliderItem>
        </Items>
    </telerik:RadSlider>

    Of course you will need to adjust the CSS to fit the slider's design on your end. 

    Regards,
    Ianko
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top