Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Slider > Can I use the slider as a date range picker?

• Christopher Ronak

  Posted on Jun 11, 2011 (permalink)

  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!
  
  

  Reply

• Hristo Germanov Hristo Germanov

  Posted on Jun 13, 2011 (permalink)

  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

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Adetokunbo

  Posted on Jul 13, 2011 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Slider > Can I use the slider as a date range picker?