How to hide slider ticks on item type slider?

5 posts, 1 answers
  1. Justin
    Justin avatar
    20 posts
    Member since:
    Jul 2011

    Posted 07 Jan 2014 Link to this post

    Hi and thanks in advance.

    I created a custom control that uses a rad slider with item type set to item. As follows:

    <td>
     <telerik:RadSlider ItemType="Item" SmallChange="1" TrackPosition="TopLeft"
      AutoPostBack="false" ShowDecreaseHandle="false" Width="490" LargeChange="0"
      OnClientValueChanged="rwc_Input_Slider_ValueChanged" OnValueChanged="radSlider1_ValueChanged"
      ShowIncreaseHandle="false" MinimumValue="0" MaximumValue="36" runat="server" ID="radSlider1">
     </telerik:RadSlider>
    </td>

    I am dynamically adding ticks on the server side. Here is the code:

    private void CreateSliderTicks(RadSlider radSlider)
    {
                int minuteTicks = 6;
                int hourTicks = 24;
                int dayTicks = 8;
     
                // add minute ticks to the graph
                for (int i = 0; i < minuteTicks; i++)
                {
                    RadSliderItem minuteItem = new RadSliderItem();
                    minuteItem.Value = (i * 10).ToString() + " " + Resources.Units.Minutes;
                    //string testValue = minuteItem.Value.ToString();
                    //minuteItem.Text = minuteItem.Value.ToString() + " minutes";
                    radSlider.Items.Add(minuteItem);   
                }
     
                // add hour ticks to the graph
                for (int i = 1; i < hourTicks; i++)
                {
                    RadSliderItem hourItem = new RadSliderItem();
                    string units = "";//Resources.Units.Hours;
                    if (i > 1)
                    {
                        units = Resources.Units.Hours;
                    }
                    else
                    {
                        units = Resources.Units.Hour;
                    }
                    hourItem.Value = i.ToString() + " " + units;
                    //string testValue = hourItem.Value.ToString();
                 
                    radSlider.Items.Add(hourItem);
                }
     
                // add day ticks to the graph
                for (int i = 1; i < dayTicks; i++)
                {
                    RadSliderItem dayItem = new RadSliderItem();
                    string units = "";
                    if (i > 1)
                    {
                        units = Resources.Units.Days;
                    }
                    else
                    {
                        units = Resources.Units.Day;
                    }
                    dayItem.Value = i.ToString() + " " + units;
                    //string testValue = dayItem.Value.ToString();
                   
                    radSlider.Items.Add(dayItem);
                }
     }

    The problem I am having is that the tick marks are showing once the radslider is rendered on the page. How can I hide these tick marks from showing? My understanding was that when you create an item type slider the tick marks go away, but this is not the case. Any help would be appreciated. I have included a screenshot for reference.
    Thanks,
    -Justin
  2. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 Jan 2014 Link to this post

    Hi Justin,

    You can try hiding the ticks with a custom CSS rule with display:none attribute.

    You can see this example:
    <telerik:RadSlider ID="RadSlider3" runat="server" LargeChange="0" SmallChange="5"
         Value="0" MinimumValue="-50" MaximumValue="50" Width="400" Height="60" ItemType="Tick"
         TrackPosition="TopLeft" CssClass="MySlider">
    </telerik:RadSlider>

    CSS:
    .MySlider .rslItemsWrapper li {
        display: none;
    }


    Regards,
    Ianko
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Justin
    Justin avatar
    20 posts
    Member since:
    Jul 2011

    Posted 10 Jan 2014 Link to this post

    lanko,
    That worked great. I tried using the css before, but was using the wrong element name. Thanks for your help.
    -Justin
  5. Nick
    Nick avatar
    1 posts
    Member since:
    Nov 2010

    Posted 13 Mar 2014 in reply to Justin Link to this post

    I have the same issue; I tried the recommended CSS, but now the item values are gone as well as the tick marks. Thoughts?
  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 18 Mar 2014 Link to this post

    Hello,

    You could try to use the following code:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .RadSlider.MySlider .rslItemsWrapper li {
                background-image: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
         
        <telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100"
            SmallChange="5" LargeChange="10" ItemType="tick" Height="70px" Width="350px"
            AnimationDuration="400" ThumbsInteractionMode="Free" CssClass="MySlider">
        </telerik:RadSlider>
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017