JQuery UI Slider for time

Question

Hi I need to implement a slider for 24 hour time range . I like to use jquery ui slider for this . I have written below code

Answer 1

Here is my 24 hours version based on both of the answers for input fields

Javascript

jQuery(function() {
    jQuery('#slider-time').slider({
        range: true,
        min: 0,
        max: 1440,
        step: 15,
        values: [ 600, 1200 ],
        slide: function( event, ui ) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) hours1= '0' + hours;
            if(minutes1.length < 10) minutes1 = '0' + minutes;

            if(minutes1 == 0) minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) hours2= '0' + hours;
            if(minutes2.length < 10) minutes2 = '0' + minutes;

            if(minutes2 == 0) minutes2 = '00';

            jQuery('#amount-time').val(hours1+':'+minutes1+' - '+hours2+':'+minutes2 );
        }
    });
});

HTML

Time