Can I use the slider as a date range picker?

[Christopher Ronak]

Hi, I'd like to be able to use the slider to quickly and easily change date ranges. Is this possible? Do you have an example somewhere?

Thanks!

[Hristo Germanov]

Hi Christopher Ronak,

Thank you for contacting us.

Unfortunately, the Slider/RangeSlider do not support this functionality. You can set only number values for the Slider/RangeSlider:

<%= Html.Telerik().Slider<int>()
      .Name("SliderYears")
      .Min(2000)
      .Max(2020)
%>

All the best,
Hristo Germanov
the Telerik team

[Adetokunbo]

I ran into the same problem and did the follow.

1) I have  a view with the slider defined as follows

@{

    Html.Telerik().RangeSlider<int>()
        .Name("DateRange")
        .Max(400)
        .Min(0)
        .LargeStep(7)
        .Values(ViewBag.StartRange, ViewBag.EndRange)
        .Orientation(SliderOrientation.Horizontal)
       .Render();
}

On the page I also a window load function defined as follows.  This gets the slider, and replaces all the numeric values with dates as calculated via an offset.

$(window).load(function () {

       var col = $("#timewrapper .t-tick-large .t-label")
       var fDate = new Date(2011, 5, 27);
       for (var i = 0; i < col.length; i++) {
           var j = (i < 1) ? 0 : 7;

           fDate.setDate(fDate.getDate() + j);
           var d = fDate.getDate();
           var m = fDate.getMonth() + 1;
           d = (d<10)?"0" + d:d;
           m = (m<10)?"0" + m:m;
           var txt = m+ "/" + d;
           $(col[i]).text(txt);
       }
   });

In the controller when you receive the two values for the slider, you just need to translate them back against the offset again to get the actual date values.  Below is a snippet of my controller code

public ActionResult Index(int startRange = -1, int stopRange = -1)
        {

            DateTime begin = new Date (2011, 6, 27);
            if (startRange < 0)
            {
                DateTime now = new DateTime(DateTime.Now.Year,DateTime.Now.Month, DateTime.Now.Day);
                startRange = now.Subtract(begin).Days;
                stopRange = startRange + 1;
            }
            if (stopRange < startRange)
            {
                stopRange = startRange + 1;
            }

          //pass values to view for slider
            ViewBag.StartRange = startRange;
            ViewBag.EndRange = stopRange;

           //convert offset integers into dates
            DateTime sDate = begin.AddDays(startRange) ;
            DateTime eDate = begin.AddDays(stopRange);

Hope this helps