NoUiSlider

Question

我想要一个范围从 00:00:10 到 01:30:00 的视频持续时间滑块。我得到以毫秒为单位的持续时间，我也需要以毫秒为单位发送它们。我用我的 2 个格式化函数和一个 update 事件处理程序调用 noUiSlider.create：

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

问题是 msToHHMMSS 函数被调用了 3 次，值为 10000、5400000，然后再次调用 10000，然后 HHMMSSToms 被调用但值为 undefined 并抛出错误：Cannot read property 'split' of undefined.

我看过，但正如我在开头所说的，我需要 hh:mm:ss 格式。

Answer 1

如果您不使用 format 选项初始化滑块，但仅像这样转换更新函数中的值，也许没问题：

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

或者您还有其他地方想要显示时间格式吗？

NoUiSlider - 将毫秒格式化为 hh:mm:ss 发送未定义

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

javascript