jQuery slider setting incorrect ui.values

Question

I have a slider that has a min value of Jan 1, 2012 and a max value of Dec 31, 2018.

When I move the min date slider, for some reason the max date value gets reset to Nov 23 2018.

I think it's similar to the rounding problem here >>> Jquery UI Slider incorrect max value but I don't know how to fix a rounding issue with Date.

I have logged a bunch of console.logs to see where the max date is getting reset. Basically, jQuery slider sets both min and max values once the slider is clicked. I tried looking under the hood of the slider API but it wasn't very helpful. I even tried some of the other Events to see what their ui.values returned to no avail. They all reset the max date (incorrectly) to Nov 23 2018.

Bottom line: how do I change my code to get the slide max date to reflect actual slider?

Code:

$("#slider").slider({
  range: true,
  min: new Date("1/1/2012").getTime(),
  max: new Date("12/31/2018").getTime(),
  step: new Date("4/1/2010").getTime() - new Date("1/1/2010").getTime(),
  values: [new Date("1/1/2012").getTime(), new Date("12/31/2018").getTime()],
  slide: function(event, ui) {
    // console.log(new Date("12/31/2018").getTime());
    // console.log(ui.values);
    sliderBegDate = new Date(ui.values[0]);
    sliderEndDate = new Date(ui.values[1]);
    $("#dateLabel1").text("From " + formatTime(new Date(ui.values[0])));
    $("#dateLabel2").text(" to " + formatTime(new Date(ui.values[1])));

    updateCharts();
  }
});

Could you include the `formatTime` function if possible? – Shiny Jan 25 '20 at 20:41 — Shiny, Jan 25 '20 at 20:41

Shiny · Accepted Answer · 2020-01-26T02:34:50.400

The issue seems to be with your step value - Currently you're stepping forwards 3 months at a time, which doesn't divide equally into your min - max range, so it's adjusting your max to fit the step

You could change what your max is to fit, or find a step amount that works for you - In this demo, I've set the step to 4 days and this works

$("#slider").slider({
  range: true,
  min: new Date("1/1/2012").getTime(),
  max: new Date("12/31/2018").getTime(),
  step: 345600000,
  values: [new Date("1/1/2012").getTime(), new Date("12/31/2018").getTime()],
  
  slide: function(event, ui) {
    sliderBegDate = new Date(ui.values[0]);
    sliderEndDate = new Date(ui.values[1]);
    $("#dateLabel1").text("From " + new Date(ui.values[0]));
    $("#dateLabel2").text(" to " + new Date(ui.values[1]));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

<div id="dateLabel1">Demo</div>
<div id="dateLabel2">Demo</div>

score 1 · Answer 2 · answered Jan 25 '20 at 21:34

@Shiny is correct - this has to do with your step value... To demonstrate this, run the code below to see which dates fall in the "step range" you are wanting..

If you want to step by 3 months at a time, it appears the closest to 12/31/2018 (with going over) you can get is 1/1/2019..

let run = true,
  count = 0,
  safetyNet = 10000,
  startDate = new Date("1/1/2012"),
  stopDate = new Date("12/31/2018"),
  monthsToIncrement = 3,
  currentDate = new Date(startDate),
  values = [];

while (currentDate < stopDate && run) {
  count++;
  if (count >= safetyNet) {
    run = false;
  } else {
    values.push(currentDate);
    currentDate = new Date(currentDate.setMonth(currentDate.getMonth() + monthsToIncrement));
  }
}

let lastDate = new Date(values[values.length - 1]);

alert(`Starting at "${startDate.toLocaleDateString()}", and incrementing by "${monthsToIncrement}" months, the closest date we get to "${stopDate.toLocaleDateString()}" is "${lastDate.toLocaleDateString()}"..\r\n\r\nPress OK, and then open your browsers console to view all available values within this range.`);
console.log(values);

jQuery slider setting incorrect ui.values

2 Answers2