0

我正在尝试使 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

4

1 回答 1

3

You can do this by defining a formatter, and using it for both the pips and a Link to the #rangeFr_time span. Don't set a format option on the slider itself, so you get the numeric output on the data-time-fr/to attributes.

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

This jsFiddle shows it in action.

于 2015-05-01T12:41:43.450 回答