i'm trying adapt nouislider needs. have slider 24 hours (1 day) while store values in 24-hr format, want show them on am/pm scale.
so working function 24 hours:
$('#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); then use second function add pips below:
$('#time').nouislider_pips({ mode: 'positions', values: [0,25,50,75,100], density: 4.16 }, true); and linked values elements on page show selections:
$('#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> so modifications below. i've created array:
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' }; then modified first function
... format: { to: function ( value ) { return hours[value]; }, ... now, displays in pips , on screen i'm stuck trying corresponding value on 24-hr scale data tag of display elements. should this:
<strong id="rangefr_time" data-time-fr="9">9 am</strong> <strong id="rangeto_time" data-time-to="14">2 pm</strong>
you can defining formatter, , using both pips , link #rangefr_time span. don't set format option on slider itself, numeric output on 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 lower $('#time').link('lower').to($('#rangefr_time'), function( value ){ $(this).attr('data-time-fr', value); }); // set text lower $('#time').link('lower').to($('#rangefr_time'), function( value ){ $(this).html(value); }, formatter); this jsfiddle shows in action.
