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

<script type="text/javascript">
$(function() {
    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 23.59,
        step: 0.15
    });
});
</script>

I like the range is like 01:00----01:59

How i gave the colon(:) instead of dot(.) . Also the range waas gone beyond 59 like 05:85 . Please help me to create a time slider

Solution 1

Do not use hours as a unit, use minutes instead. Then apply a slide event that converts the minutes to hours:

$(function() {
    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 1440,
        step: 15,
        slide: function(e, ui) {
            var hours = Math.floor(ui.value / 60);
            var minutes = ui.value - (hours * 60);

            if(hours.toString().length == 1) hours = '0' + hours;
            if(minutes.toString().length == 1) minutes = '0' + minutes;

            $('#something').html(hours+':'+minutes);
        }
    });
});

Solution 2

Improving on Tatu's answer, to get the time range in "civilian time," with a 12 hour clock and AM and PM designations. Here is a JSFIDDLE

*Update - I changed the code slightly so that the min value displays as "12:00 AM" and the max value displays as "11:59 PM." The fiddle is also updated...

    $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 1440,
            step: 15,
            values: [ 600, 720 ], //or whatever default time you want
            slide: function(e, ui) {
                var hours1 = Math.floor(ui.values[0] / 60);
                var minutes1 = ui.values[0] - (hours1 * 60);

                if(hours1.length == 1) hours1 = '0' + hours1;
                if(minutes1.length == 1) minutes1 = '0' + minutes1;
                if(minutes1 == 0) minutes1 = '00';

                if(hours1 >= 12){

                    if (hours1 == 12){
                        hours1 = hours1;
                        minutes1 = minutes1 + " PM";
                    }
                    else{
                        hours1 = hours1 - 12;
                        minutes1 = minutes1 + " PM";
                    }
                }

                else{

                    hours1 = hours1;
                    minutes1 = minutes1 + " AM";
                }
                if (hours1 == 0){
                    hours1 = 12;
                    minutes1 = minutes1;
                }

                $('.slider-time').html(hours1+':'+minutes1);

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

                if(hours2.length == 1) hours2 = '0' + hours2;
                if(minutes2.length == 1) minutes2 = '0' + minutes2;
                if(minutes2 == 0) minutes2 = '00';
                if(hours2 >= 12){
                    if (hours2 == 12){
                        hours2 = hours2;
                        minutes2 = minutes2 + " PM";
                    }
                    else if (hours2 == 24){
                        hours2 = 11;
                        minutes2 = "59 PM";
                    }
                    else{
                        hours2 = hours2 - 12;
                        minutes2 = minutes2 + " PM";
                    }
                }
                else{
                    hours2 = hours2;
                    minutes2 = minutes2 + " AM";
                }

                $('.slider-time2').html(hours2+':'+minutes2);
            }
    });

Solution 3

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

<label for="amount-time">Time</label>
<input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/>
<div id="slider-time"></div><br>

Comments

[Nisanth Kumar]

Hi its working fine .. thank u very much.. Note: hours.length didn't work 4 me . I use hours.toString().length

[Greg]

How could I turn this into a time picker (VS a time range picker) ? In other words, how could I get rid off the upper time limit ?

[radtek]

One thing that needs to be added is the conversion of the hours and minutes to string before checking their length so you get '00' minutes instead of '0' alone. var minutes = minutes+""; //before str.length

[paulo62]

I tried this and it worked, although I have a couple of comments. The Javascript contains code such as 'hours1=hours1' and 'minutes1=minutes1' which my development environment amusingly calls 'wierd assignment'. Also the CSS in the JSfiddle contains a couple of long, broken and rather suspicious URLs.

[Jeff Weinberg]

@paulo62 - The urls in the css are called Data URIs (css-tricks.com/data-uris) and the "weird assignments" are definitely weird, I think I had put them in as teaching devices, to illustrate that in those cases the values stay the same.

[Gaurav Aggarwal]

answer seems to be very great but badly in a need of fidde example..please help me with the fiddle example

[Varun Sharma]

Guys Could you help me for this problem.stackoverflow.com/questions/45350964/…