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

次に、2 番目の関数を使用して以下にピップを追加します。

$('#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