Date-range slider

[eyal]

Hi,

I created a customized date-range slider (screenshot attached) in one of my projects that I would like to share and get feedback.

aspx markup:

<telerik:RadScriptBlock ID="radScriptBlock1" runat="server">

<script type="text/javascript">

function onClientValueChanging(sender, args)

    {


        if(!isSliding) return;

           //OADate origin is midnight, 30 December 1899                             

        var date = new Date('December 30,1899 00:00:00');

        date.setDate(date.getDate()+parseInt(args.get_newValue()));

        var tooltip = $find("<%= radToolTipSlider.ClientID %>");

        resetToolTipLocation(tooltip);

        var day  = date.getDate();

        var month = date.getMonth() + 1;

        var year = date.getFullYear();

        tooltip.set_text(day+'.'+month+'.'+year); // finnish-localized date format


    }

var isSliding = false;

function onClientSlideStart(sender, args)

    {

        isSliding = true;

 

        var tooltip = $find("<%= radToolTipSlider.ClientID %>");

        showRadToolTip(tooltip, sender);

    }

function onClientSlide(sender, args)

    {

        var tooltip = $find("<%= radToolTipSlider.ClientID %>");

        showRadToolTip(tooltip, sender);

    }

function onClientSlideEnd(sender, args)

    {

        isSliding = false;

 

        var tooltip = $find("<%= radToolTipSlider.ClientID %>");

        tooltip.hide();

    }

function showRadToolTip(tooltip, slider)

    {

        var activeHandle = slider.get_activeHandle();

        if(!activeHandle) return;

                    

        tooltip.set_targetControl(activeHandle);

        resetToolTipLocation(tooltip);

    }

function resetToolTipLocation(tooltip)

    {

        if (!tooltip.isVisible())

            tooltip.show();

        else

            tooltip.updateLocation();

    }

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="radAjaxManager" runat="server">

<AjaxSettings>

    <telerik:AjaxSetting AjaxControlID="radSliderDates">

        <UpdatedControls>

            <telerik:AjaxUpdatedControl ControlID="lblSliderStartDate" UpdatePanelRenderMode="Inline" />

            <telerik:AjaxUpdatedControl ControlID="lblSliderEndDate" UpdatePanelRenderMode="Inline" />

        </UpdatedControls>

    </telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel1" runat="server" />

<telerik:RadToolTip  ID="radToolTipSlider" runat="server" Position="TopCenter" OffsetY="3"

            ShowCallout="false" Height="20px" ShowEvent="FromCode" HideEvent="FromCode"></telerik:RadToolTip>

<div>

    <fieldset style="width:700px">

        <legend>Slider</legend>

        <table border="0" cellpadding="2" cellspacing="0">

            <tr>

                <td><asp:Label ID="lblSliderStartDate" runat="server" /></td>

                <td>

                    <telerik:RadSlider runat="server" ID="radSliderDates" IsSelectionRangeEnabled="true" Width="370"

                        AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false"

                         OnClientValueChanging="onClientValueChanging" OnClientSlideStart="onClientSlideStart" OnClientSlideEnd="onClientSlideEnd" OnClientSlide="onClientSlide" />

                </td>

                <td><asp:Label ID="lblSliderEndDate" runat="server" /></td>

            </tr>

        </table>

    </fieldset>

</div>

Code-behind (VB)

Private Sub InitDates()
        ' dtStart and dtEnd are fetched from db
        Dim dtStart As Date = CDate(getStartDate()).ToShortDateString
        Dim dtEnd As Date = CDate(getEndDate()).ToShortDateString
        lblSliderStartDate.Text = dtStart.ToShortDateString
        lblSliderEndDate.Text = dtEnd.ToShortDateString
        radSliderDates.MinimumValue = CInt(dtStart.ToOADate)
        radSliderDates.MaximumValue = CInt(dtEnd.ToOADate)
        radSliderDates.SelectionStart = CInt(dtStart.ToOADate)
        radSliderDates.SelectionEnd = CInt(dtEnd.ToOADate)
        radSliderDates.SmallChange = 1
    End Sub

Protected Sub radSliderDates_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles radSliderDates.ValueChanged
        Dim dtStart As Date = Date.FromOADate(radSliderDates.SelectionStart.ToString)
        Dim dtEnd As Date = Date.FromOADate(radSliderDates.SelectionEnd.ToString)
        lblSliderStartDate.Text = dtStart.ToShortDateString
        lblSliderEndDate.Text = dtEnd.ToShortDateString
    End Sub

In the project, the slider is used as a filter for ajaxified grid.
There might be some glitches in the code snippets due to the copy-paste-modify from the project. Sorry for that..

Telerik dll - 2010.1.309.35
Tested on FF 3.6.6, IE 8, Chrome 5, Safari 5

Comments are most welcome!

br,
eyal