Issue with noUiSlider - failing to update associated input field

Question

I want to update two input fields with values, when noUiSlider is updated. I have tried all permutations and combinations for last 24 hours and failed.

This is the tutorial I followed https://jsfiddle.net/skrb5cg3/138/

This is my code. I want to get the the input fields updated when the slider is changed. https://jsfiddle.net/rx8hjf5e/

$(document).ready(function(){
var rangeSliderFrom = document.getElementById('rangeSliderFrom'),
rangeSliderTo = document.getElementById('rangeSliderTo');

var sliderFormat = {
to: function(val) {
    val = Math.ceil(val);
    hours = convertToHour(val);
    minutes = convertToMinute(val,hours);       
    return formatHoursAndMinutes(hours,minutes);
  },
from: function(val) {
  return val;
}
};

var convertValuesToTime = function(values,handle){
var hours = 0, 
  minutes = 0;
if(handle === 0){
  hours = convertToHour(values[0]);
  minutes = convertToMinute(values[0],hours);
  rangeSliderFrom.value = hours;
  return;
};
hours = convertToHour(values[1]);
minutes = convertToMinute(values[1],hours);
rangeSliderTo.value = hours;
};

var convertToHour = function(value){
var p = parseFloat(Math.floor(value / 60));
console.log(p);
return p;
};

var convertToMinute = function(value,hour){
ret = value - hour * 60;
if(ret !== 30 && ret !== 0 ) {
  // cool hack to round to the nearest n
  i = ret, n = 30;
  ret = ((i % n) > n/2) ? i + n - i%n : i - i%n;
}
return parseFloat(ret);
};

var formatHoursAndMinutes = function(hours,minutes){
if(hours.toString().length == 1) hours = '0' + hours;
if(minutes.toString().length == 1) minutes = '0' + minutes;
return hours+':'+minutes;
};

// 0 = initial minutes from start of day
// 1440 = maximum minutes in a day
// step: 60 = amount of minutes to step by.
var initialStartMinute = 0, initialEndMinute = 1440, step = 60;

function createSlider(vals) {
var slider = document.getElementById("rangeSlider");
window.slider = noUiSlider.create(slider, {
  start: vals,
  connect: true,
  step: step,
  range: {
    'min': initialStartMinute,
    'max': initialEndMinute
  },
  pips: { // Show a scale with the slider
    mode: 'steps',
    stepped: true,
    density: 4,
    filter: function(value, type) {
      if(value == initialEndMinute || value == initialEndMinute) {
        return 1;
      } else if(value % 360 == 0 ) {
        return 1;
      }
    },
    format: sliderFormat
  },
  tooltips: true,
  format: sliderFormat,
  direction: 'ltr', // Put '0' at the bottom of the slider
});
window.slider.on('update',function(values,handle){
  convertValuesToTime(values,handle);
});
}

 createSlider([240,  1280]);    
});  

Any idea why the code is failing. Sorry if this is a silly question, I am new to coding and could not find out why error happens.

Answer 1

To answer my own question, I made following modifications and its working.

......
var convertValuesToTime = function(values,handle){
var hours = 0, 
    minutes = 0;
if(handle === 0){
    rangeSliderFrom.value = values[0];
    hours = convertToHour(values[0]);
    minutes = convertToMinute(values[0],hours);
    return;
};
rangeSliderTo.value = values[1];
hours = convertToHour(values[1]);
minutes = convertToMinute(values[1],hours);
};
.....