Date-range slider

1 posts, 0 answers
  1. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 13 Jul 2010 Link to this post


    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');
            var tooltip = $find("<%= radToolTipSlider.ClientID %>");
            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 %>");
    function showRadToolTip(tooltip, slider)
            var activeHandle = slider.get_activeHandle();
            if(!activeHandle) return;
    function resetToolTipLocation(tooltip)
            if (!tooltip.isVisible())
    <telerik:RadAjaxManager ID="radAjaxManager" runat="server">
        <telerik:AjaxSetting AjaxControlID="radSliderDates">
                <telerik:AjaxUpdatedControl ControlID="lblSliderStartDate" UpdatePanelRenderMode="Inline" />
                <telerik:AjaxUpdatedControl ControlID="lblSliderEndDate" UpdatePanelRenderMode="Inline" />
    <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>
        <fieldset style="width:700px">
            <table border="0" cellpadding="2" cellspacing="0">
                    <td><asp:Label ID="lblSliderStartDate" runat="server" /></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><asp:Label ID="lblSliderEndDate" runat="server" /></td>

    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!

Back to Top