NoUiSlider - formatting milliseconds to hh:mm:ss sends undefined

Question

I want a slider for video duration with a range from 00:00:10 to 01:30:00. I get the durations in milliseconds and i need to send them in milliseconds as well. I'm calling the noUiSlider.create with my 2 formatting functions and an update event handler:

var timeSlider = document.getElementById('timelineranger');

noUiSlider.create(timeSlider, {
    start: [10000, 5400000],
    connect: true,
    behaviour: 'tap-drag',
    step: 10000,
    range: {
        'min': 10000,
        'max': 5400000
    },
    format: {
        to: HHMMSSToms,
        from: msToHHMMSS
    }
});

function msToHHMMSS(value) {
    var duration = moment.duration(parseInt(value, 10));
    var addZero = function(v) { return (v<10 ? '0' : '') + Math.floor(v); };

    var time = addZero(duration.hours()) +
        ':' + addZero(duration.minutes()) +
        ':' + addZero(duration.seconds());
    return time;
}

function HHMMSSToms(value) {
    var a = value.toString().split(':');
    var ms = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]) * 1000;
    return ms;
}

timeSlider.noUiSlider.on('update', function (values, handle) {
    if (handle) {
        $('.timeMax').text(values[handle]);
    } else {
        $('timeMin').text(values[handle]);
    }
});

The problem is that the msToHHMMSS function is being called 3 times, with the values of 10000, 5400000 and then once more with 10000, then HHMMSSToms gets called but with value of undefined and throws an error: Cannot read property 'split' of undefined.

I've looked at this question, but as I've said at the beginning i need the hh:mm:ss format.

Answer 1

Perhaps it is ok if you don't init the slider with the format options but only convert the values in the update function like this:

timeSlider.noUiSlider.on('update', function (values, handle) {
    if (handle) {
        $('.timeMax').text(msToHHMMSS(values[handle]));
    } else {
        $('timeMin').text(msToHHMMSS(values[handle]));
    }
});

Or do you have another place where you want to display the time format as well?