noUISlider time after 12pm range slider

Question

I am in a bit of a pickle at the moment .. I am using the noUiSlider plugin

I have implemented a time range picker that starts from 6 am to 6 am the next day.

Basically the data until 23:59 is fine , but when it gets to the next day I need the time to be 1:00, 2:00 instead of being 25:00, 26:00 etc ...

I have been trying to work it out in my JSFiddle example but I am wondering if there is not a way easier way to handle this data.

I have based everything in minutes in my increments and values to make it easier to convert it to hours.

https://jsfiddle.net/skrb5cg3/18/

var slider = document.getElementById("slider"), 
    leftValue = document.getElementById('leftvalue'),


 rightValue = document.getElementById('rightvalue');

// 0 = initialhttps://jsfiddle.net/skrb5cg3/18/#run minutes from start of day
// 1440 = maximum minutes in a day
// step: 30 = amount of minutes to step by. 
var initialStartMinute = 0,
  initialEndMinute = 2160,
  step = 15,
  margin = 120;

slider = noUiSlider.create(slider, {
  start: [initialStartMinute, initialEndMinute],
  connect: true,
  step: step,
  margin: margin,
  start: [360, 720],
  padding: 360,
  pips: {
    mode: 'values',
    values: [0, 360, 720, 1080, 1440, 1800, 2160],
    density: 360
  },

  range: {
    'min': initialStartMinute,
    'max': initialEndMinute
  }
});

var convertValuesToTime = function(values, handle) {
  var hours = 0,
    minutes = 0;

  if (handle === 0) {
    hours = convertToHour(values[0]);
    minutes = convertToMinute(values[0], hours);
    leftValue.innerHTML = formatHoursAndMinutes(hours, minutes);
    valueleft.innerHTML = values[0];
    return;
  };

  hours = convertToHour(values[1]);
  minutes = convertToMinute(values[1], hours);
  rightValue.innerHTML = formatHoursAndMinutes(hours, minutes);
  valueright.innerHTML = values[1];

};

var convertToHour = function(value) {
  return Math.floor(value / 60);
};
var convertToMinute = function(value, hour) {
  return value - hour * 60;
};
var formatHoursAndMinutes = function(hours, minutes) {
  if (hours.toString().length == 1) hours = '0' + hours;
  if (minutes.toString().length == 1) minutes = '0' + minutes;
  return hours + ':' + minutes;
};

slider.on('update', function(values, handle) {
  convertValuesToTime(values, handle);
});



$('.noUi-value.noUi-value-horizontal.noUi-value-large').each(function() {
  var val = $(this).html();
  val = recountVal(parseInt(val));
  $(this).html(val);
});
  function recountVal(val) {
    switch (val) {
      case 0:
        return '';
        break;
      case 360:
        return '6am';
        break;
      case 720:
        return '12am';
        break;
      case 1080:
        return '6pm';
        break;
      case 1440:
        return '12pm';
        break;
      case 1800:
        return '6am';
        break;
      case 2160:
        return '';
        break;

    }
  }

I was thinking doing something like that but its very repetitive and long

if (values[1] == 1440) {
    rightValue.innerHTML = "00:00";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "00:15";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "00:30";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "00:45";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "01:00";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "01:15";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "01:30";
  }

Answer 1

Are you looking for something like this?

https://jsfiddle.net/persianturtle/skrb5cg3/19/

var convertValuesToTime = function(values, handle) {
  values = values
    .map(value => Number(value) % 1440)
    .map(value => convertMinutesToHoursAndMinutes(value))
  console.log(values)
};

var convertMinutesToHoursAndMinutes = function(minutes) {
  let hour = Math.floor(minutes / 60)
  let minute = minutes - hour * 60
  return hour + ':' + minute
}