noUiSlider值覆盖

Question

我试图让noUiSlider适应我的需求。我希望有一个24小时（1天）的滑块，但是当我以24小时格式存储值时，我想以上午/下午的比例显示它们。

所以这是24小时的工作功能：

$('#time').noUiSlider({
    start: [ 5, 11 ],
    step: 1,
    connect: true,
    margin: 2,
    range: {
        'min': 0,
        'max': 24
    },
    format: {
        to: function ( value ) {
            return value + ':00';
        },
        from: function ( value ) {
            return value.replace(':00', '');
        }
    }
}, true);

然后我使用第二个函数在下面添加点数：

$('#time').noUiSlider_pips({
    mode: 'positions',
    values: [0,25,50,75,100],
    density: 4.16
}, true);

最后，我将值链接到页面上的元素以显示选择：

$('#time').Link('lower').to($('#rangeFr_time'));
$('#time').Link('upper').to($('#rangeTo_time'));


<strong id="rangeFr_time">9:00</strong>
<strong id="rangeTo_time">14:00</strong>

所以我的修改如下。我创建了一个数组：

var hours = {
        0: '0',
        1: '1 am',
        2: '2 am',
        3: '3 am',
        4: '4 am',
        5: '5 am',
        6: '6 am',
        7: '7 am',
        8: '8 am',
        9: '9 am',
        10: '10 am',
        11: '11 am',
        12: 'noon',
        13: '1 pm',
        14: '2 pm',
        15: '3 pm',
        16: '4 pm',
        17: '5 pm',
        18: '6 pm',
        19: '7 pm',
        20: '8 pm',
        21: '9 pm',
        22: '10 pm',
        23: '11 pm',
        24: 'midnight'
    };

然后我修改了第一个函数

 ...
 format: {
     to: function ( value ) {
         return hours[value];
 },
 ...

现在，它在点子和屏幕上正确显示我试图在24小时刻度上获得相应的值到显示元素的数据标签中。它应该是这样的：

<strong id="rangeFr_time" data-time-fr="9">9 am</strong>
<strong id="rangeTo_time" data-time-to="14">2 pm</strong>

JSFIDDLE

Answer 1

您可以通过定义格式化程序并将其用于点数和Link到#rangeFr_time范围来执行此操作。不要在滑块本身上设置格式选项，因此您可以获得data-time-fr/to属性的数字输出。

function renameHour (value) {
    return hours[value];
}

var formatter = {
    to: renameHour
}

$('#time').noUiSlider({
    start: [8, 11],
    step: 1,
    connect: true,
    margin: 2,
    range: {
        'min': 0,
        'max': 24
    }
}, true);

$('#time').noUiSlider_pips({
    mode: 'positions',
    values: [0, 25, 50, 75, 100],
    density: 4.16,
    format: formatter
}, true);

// Set attr for lower
$('#time').Link('lower').to($('#rangeFr_time'), function( value ){
   $(this).attr('data-time-fr', value);
});

// Set text for lower
$('#time').Link('lower').to($('#rangeFr_time'), function( value ){
   $(this).html(value);
}, formatter);

此jsFiddle显示了它的实际效果。