Slider clickable text area

[Dave]

I'm using the radslider wrapped in an ajax update panel control to create a timeline for a clients site. It's working and looking great. However I am trying to style the item text slightly by wrapping some of it (the Day) in a span element. When I do this, I can no longer click on the text in the span to move the tick. Is there a way maybe with css to make the whole block clickable instead of just the text? An Item template and itemdatabound event would rock, but I realize that's not the intended use for this control. Here's what I'm doing in the Item Text. Right now if I click on the larger Day Text nothing happens, but if you click on the Month or Year it works fine. See screenshot also.

<style type="text/css">

    .TimelineContainer
    {
        width:938px;
         height: 250px;
         margin-bottom:30px;
    }

    .TimelineContainer h3
    {
         margin: 0 0 12px;
        color: #C94D58;
        font: 20px CenturyGothicBold, arial, helvetica, sans-serif;
    }

    .TimelineImageWrapper
    {
        width:465px;
        height: 250px;
        float:left;
    }

    .TimelineTextWrapper
    {
        width:432px;
        height: 210px;
        float:left;
        padding: 0px 20px 20px 20px;
    }

    .TimelineDay
    {
        font-size:14px !important;
    }

</style>

<telerik:RadAjaxPanel ID="srRadAjaxPanel" runat="server">


    <div class="TimelineContainer">
        <div class="TimelineImageWrapper">
            <asp:Image ID="imgImage" runat="server" Width="465px" Height="250px" />
        </div>
        <div class="TimelineTextWrapper">
            <h3>Timeline Header</h3>
            Timeline text for testing the timeline control. Timeline text for testing the timeline control. Timeline text for testing the timeline control.
            Timeline text for testing the timeline control. Timeline text for testing the timeline control. Timeline text for testing the timeline control.
            Timeline text for testing the timeline control. Timeline text for testing the timeline control.
        </div>

    </div>


    <telerik:RadSlider ID="rsTimelineSlider" runat="server" ItemType="Item"
    Width="938" Height="120" Skin="Transparent" AutoPostBack="true"
    ShowIncreaseHandle="false" ShowDecreaseHandle="false">

     <Items>

        <telerik:RadSliderItem Text="June<span class='TimelineDay'>5</span>1978" />
        <telerik:RadSliderItem Text="July<span class='TimelineDay'>15</span>1979" />
        <telerik:RadSliderItem Text="May<span class='TimelineDay'>8</span>1980" />
        <telerik:RadSliderItem Text="August<span class='TimelineDay'>11</span>1981" />
        <telerik:RadSliderItem Text="Jan<span class='TimelineDay'>12</span>1982" />
        <telerik:RadSliderItem Text="Feb<span class='TimelineDay'>9</span>1982" />
        <telerik:RadSliderItem Text="March<span class='TimelineDay'>3</span>1982" />
        <telerik:RadSliderItem Text="April<span class='TimelineDay'>17</span>1982" />
        <telerik:RadSliderItem Text="Aug<span class='TimelineDay'>23</span>1985" />
        <telerik:RadSliderItem Text="June<span class='TimelineDay'>25</span>1989" />
        <telerik:RadSliderItem Text="Sept<span class='TimelineDay'>14</span>1990" />
        <telerik:RadSliderItem Text="June<span class='TimelineDay'>5</span>1978" />
        <telerik:RadSliderItem Text="July<span class='TimelineDay'>15</span>1979" />
        <telerik:RadSliderItem Text="May<span class='TimelineDay'>8</span>1980" />
        <telerik:RadSliderItem Text="August<span class='TimelineDay'>11</span>1981" />
        <telerik:RadSliderItem Text="Jan<span class='TimelineDay'>12</span>1982" />
        <telerik:RadSliderItem Text="Feb<span class='TimelineDay'>9</span>1982" />
        <telerik:RadSliderItem Text="March<span class='TimelineDay'>3</span>1982" />
        <telerik:RadSliderItem Text="April<span class='TimelineDay'>17</span>1982" />
        <telerik:RadSliderItem Text="Aug<span class='TimelineDay'>23</span>1985" />
        <telerik:RadSliderItem Text="June<span class='TimelineDay'>25</span>1989" />
        <telerik:RadSliderItem Text="Sept<span class='TimelineDay'>14</span>1990" />
    </Items>

</telerik:RadSlider>

</telerik:RadAjaxPanel>

[Slav]

Hi Dave,

The RadSlider control does not support nesting HTML elements in its items as you did in your example. Alternatively, you can use a client-side script to customize the content of a slider item so that it matches your requirements. The sample above shows the handler of the RadSlider's client-side event OnClientLoad which gets the span of every item and splits it into three span elements, one of which has your CSS class applied:

<script type="text/javascript">
    function OnClientLoad(sender, args) {
        var items = sender.get_items();
        for (var i = 0; i < items.length; i++) {
            var itemElement = $telerik.$(items[i].get_element());
            var date = itemElement.find("span").html().split(" ");
            itemElement.find("span").html(date[0]);
            itemElement.append("<span class='TimelineDay'>" + date[1] + "</span>");
            itemElement.append("<span>" + date[2] + "</span>");
        }
    }
</script>

Note that you should pass the name of this function to the OnClientLoad property of RadSlider in order for this script to work.

Greetings,
Slav
the Telerik team