Javascript - calculate time difference between two jQuery UI Sliders

Question

So I've been searching around Stack Overflow and found some good stuff to help me, but I'm not sure how to put it together. Basically I have two jQuery UI sliders, with each giving me a time as a value. Then, on click, I'd like to calculate the time difference between the value 1 and value 2. I have everything I need but when I click the button, it outputs a NaN error. It works on first run as I've got the variables set as defaults, but basically I need to attach the slider values to these so they'll get picked up instead of the defaults. Any help greatly appreciated...

JS FIDDLE

My HTML:

<div class="sliders_step1">
   <div id="slider-range-sleep"></div>
</div>

<div class="sliders_step1">
    <div id="slider-range-wake"></div>
</div>

<a href = "javascript:void(0);" class = "nav-arrow right-nav-arrow grey-blue-link" id = "question1-right">Click me</a>

How I'm creating the time values from both sliders:

    $("#slider-range-sleep").slider({
    range: false,
    min: 0,
    max: 1440,
    step: 15,
    values: [1250],
    slide: function (e, ui) {
        var hours1 = Math.floor(ui.values[0] / 60);
        var minutes1 = ui.values[0] - (hours1 * 60);

        if (hours1.length == 1) hours1 = '0' + hours1;
        if (minutes1.length == 1) minutes1 = '0' + minutes1;
        if (minutes1 == 0) minutes1 = '00';
        if (hours1 >= 12) {
            if (hours1 == 12) {
                hours1 = hours1;
                minutes1 = minutes1 + " PM";
            } else {

                minutes1 = minutes1 + " PM";
            }
        }else if (hours1 <= 9) {
            hours1 = "0" + hours1;
            minutes1 = minutes1 + " AM";
            ampmWake = "morning";   
        }
        else {
            hours1 = hours1;
            minutes1 = minutes1 + " AM";
        }
        if (hours1 == 0) {
            hours1 = 12;
            minutes1 = minutes1;
        }

        sleepTime = hours1 + minutes1;

        sleepTime = sleepTime.replace(' AM','');
        sleepTime = sleepTime.replace(' PM','');

        $('.slider-time').html(hours1 + ':' + minutes1);

    }

});


$("#slider-range-wake").slider({
    range: false,
    min: 0,
    max: 1440,
    step: 15,
    values: [400],
    slide: function (e, ui) {
        var hours2 = Math.floor(ui.values[0] / 60);
        var minutes2 = ui.values[0] - (hours2 * 60);


        if (hours2.length == 1) hours2 = '0' + hours2;
        if (minutes2.length == 1) minutes2 = '0' + minutes2;
        if (minutes2 == 0) minutes2 = '00';
        if (hours2 >= 12) {
            if (hours2 == 12) {
                hours2 = hours2;
                minutes2 = minutes2 + " PM";

            } else {

                minutes2 = minutes2 + " PM";

            }
        } 
        else if (hours2 <= 9) {
            hours2 = "0" + hours2;
            minutes2 = minutes2 + " AM";

        }

        else {
            hours2 = hours2;
            minutes2 = minutes2 + " AM";

        }
        if (hours2 == 0) {
            hours2 = 12;
            minutes2 = minutes2;
        }

        wakeTime = hours2 + minutes2;

        wakeTime = wakeTime.replace(' AM','');
        wakeTime = wakeTime.replace(' PM','');

        $('.slider-time-wake').html(hours2 + ':' + minutes2);


    }
});

And my on click event which should calculate the time difference and output an alert:

var sleepTime = '22:00';
var wakeTime = '06:00';

$("#question1-right").on('click', function() {

   var startTimeArray = sleepTime.split(":");
   var startInputHrs = parseInt(startTimeArray[0]);
   var startInputMins = parseInt(startTimeArray[1]);

   var endTimeArray = wakeTime.split(":");
   var endInputHrs = parseInt(endTimeArray[0]);
   var endInputMins = parseInt(endTimeArray[1]);

   var startMin = startInputHrs*60 + startInputMins;
   var endMin = endInputHrs*60 + endInputMins;

   var result;

   if (endMin < startMin) {
       var minutesPerDay = 24*60; 
       result = minutesPerDay - startMin;  // Minutes till midnight
       result += endMin; // Minutes in the next day
   } else {
      result = endMin - startMin;
   }

   var minutesElapsed = result % 60;
   var hoursElapsed = (result - minutesElapsed) / 60;

   alert ( "Elapsed Time : " + hoursElapsed + ":" + (minutesElapsed < 10 ?
            '0'+minutesElapsed : minutesElapsed) ) ;

});

Answer 1

When you set the value of sleepTime and wake time you're missing the ':'

sleepTime = hours1 + minutes1;
wakeTime = hours2 + minutes2;

Should be:

sleepTime = hours1 + ':' + minutes1;
wakeTime = hours2 + ':' + minutes2;