Q:

jQuery slider setting incorrect ui.values

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();
  }
});

A:

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>

