This is a migrated thread and some comments may be shown as answers.

How to hide slider ticks on item type slider?

4 Answers 406 Views

Slider

This is a migrated thread and some comments may be shown as answers.

Justin asked on 07 Jan 2014, 10:09 PM

Slider-Tick-Issue.jpg

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

4 Answers, 1 is accepted

Accepted

answered on 10 Jan 2014, 02:00 PM

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.

answered on 18 Mar 2014, 04:28 PM

Hello,

You could try to use the following code:

<html xmlns="http://www.w3.org/1999/xhtml">

<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.