Customize Tick labels/tooltips

[John]

Hi,

I'd like to be able to customize the large tick mark labels and tooltips to display dates rather than numbers, can you tell me how to achieve this please. I have a date range slider where each value represents an offset from the start date. I can then calculate the selection by adding the offset to the start date. However, instead of displaying the actual integer value of the large tick, marks I'd like to be able to customize this by calculating what the date would be at that tick mark and displaying a date instead.

Many Thanks,

John.

[Tsvetie]

Hi John,
A RadSlider with ItemType=Tick is still simply a numeric slider control. The tick marks display information for some of the values of the RadSlider. In case you do not need a numeric slider, but rather a slider with custom items, you should use a RadSlider with ItemType=Item and define your items.

Please refer to our online demos for information on the ItemType functionality.

Sincerely yours,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[John]

Thanks for your reply,

Using ItemType.Item was, I thought, the way to go. The problem is ItemType.Item is only usable with a fairly small number of discrete items. With my requirement, it's possible that there could be in the region of about 100 discrete dates, but it should be usable with a larger number of values. Using ItemType.Tick works fine as I can work out the offset value from the start and convert that to a date. I've also added a tooltip to show the date while the handles are being dragged. What I wanted to do was, if the number of discrete values gets too large, then set the LargeChange property to display tick marks at certain intervals along the slider and show dates rather than numbers. Looking in the API there is an itemData structure which looks like it would do the trick, but I tried calling set_itemData method and it didn't display any values on the ticks at all.

Any further help would be greatly appreciated.

Thanks,

John

[Tsvetie]

Hi John,
In this case, you can work with the HTML of the RadSlider control and update the text of the ticks. Have a look at the following code fragment - this is the HTML that represents the ticks of the slider:
slider:

<telerik:RadSlider ID="RadSlider1" runat="server" ItemType="Tick" Width="400px" Height="70px"
    TrackPosition="BottomRight" SmallChange="5" LargeChange="10">
</telerik:RadSlider>

ticks HTML:

<ul class="rslItemsWrapper">
    <li class="rslLargeTick rslLargeTickFirst" title="0" unselectable="on" style="width: 12px; height: 56px; background-position: 4px bottom;"><span style="width: 12px;">0</span></li>
    <li class="rslSmallTick" title="5" unselectable="on" style="width: 17px; height: 56px;"/>
    <li class="rslLargeTick" title="10" unselectable="on" style="width: 17px; height: 56px;"><span>10</span></li>
    <li class="rslSmallTick" title="15" unselectable="on" style="width: 17px; height: 56px;"/>
    <li class="rslLargeTick" title="20" unselectable="on" style="width: 17px; height: 56px;"><span>20</span></li>
    <li class="rslSmallTick" title="25" unselectable="on" style="width: 17px; height: 56px;"/>
    <li class="rslLargeTick" title="30" unselectable="on" style="width: 17px; height: 56px;"><span>30</span></li>
    <li class="rslSmallTick" title="35" unselectable="on" style="width: 18px; height: 56px;"/>
    <li class="rslLargeTick" title="40" unselectable="on" style="width: 17px; height: 56px;"><span>40</span></li>
    <li class="rslSmallTick" title="45" unselectable="on" style="width: 17px; height: 56px;"/>
    <li class="rslLargeTick" title="50" unselectable="on" style="width: 17px; height: 56px;"><span>50</span></li>
    <li class="rslSmallTick" title="55" unselectable="on" style="width: 17px; height: 56px;"/>
    <li class="rslLargeTick" title="60" unselectable="on" style="width: 17px; height: 56px;"><span>60</span></li>
    <li class="rslSmallTick" title="65" unselectable="on" style="width: 18px; height: 56px;"/>
    <li class="rslLargeTick" title="70" unselectable="on" style="width: 17px; height: 56px;"><span>70</span></li>
    <li class="rslSmallTick" title="75" unselectable="on" style="width: 17px; height: 56px;"/>
    <li class="rslLargeTick" title="80" unselectable="on" style="width: 17px; height: 56px;"><span>80</span></li>
    <li class="rslSmallTick" title="85" unselectable="on" style="width: 17px; height: 56px;"/>
    <li class="rslLargeTick" title="90" unselectable="on" style="width: 17px; height: 56px;"><span>90</span></li>
    <li class="rslSmallTick" title="95" unselectable="on" style="width: 18px; height: 56px;"/>
    <li class="rslLargeTick rslLargeTickLast" title="100" unselectable="on" style="width: 12px; height: 56px; background-position: 8px bottom;"><span style="width: 17px;">100</span></li>
</ul>

The set_itemData is used to pass the information for the items (ItemType=Item) from the server to the client. In the case ItemType=Tick, the slider only needs the values of the SmallChange and LargeChange properties in order to create ticks for them. That is why, in case you want to customize the ticks, you can only do this by customizing the HTML of the slider directly.

Additionally, you can use the get_items client method of the RadSlider that returns an array of the items and customize the HTML for specific items. For example:

<script type="text/javascript">
    function GetFirstItemHTML()
    {
        var slider = $find("RadSlider1");
        alert(slider.get_items()[0].get_element().outerHTML);
    }
</script>

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.