Revisiting the jQuery UI Time Slider

Last year I wrote a post on how to use the jQuery UI slider widget for time ranges. I got emailed a question about it two weeks ago and looking back at the code, I realized there were many things that could be done much better. So I decided to rewrite the code as a jQuery UI plugin wrapping the slider widget and put it on GitHub.

Hopefully the code is now cleaner, more efficient, and easier to understand. You can see the demo here

11 thoughts on “Revisiting the jQuery UI Time Slider

  1. Pingback: Using a jQuery UI Slider to Select a Time Range | Marc Neuwirth's Blog

  2. Hey Marc,
    I was trying to do something quite similar to this and tried using your code.
    Unfortunately, there’s still a couple bugs…
    You moved the if statements for AM/PM around a bit compared to last year’s implementation. As a result, 12AM shows up before 1PM (instead of before 1AM). Your original code worked correctly in this respect.
    I also noticed that, if you move the handles in tiny increments, the slider’s behaviour becomes a bit wonky. The displayed time sometimes moves in the opposite direction than it should. So it might be at 11:30 and, by moving the handle left it becomes 11:35 instead of 11:25. This is probably an issue with the conversion from milliseconds to minutes+hours. I didn’t dig deeper into it since I only needed my slider for 30′ steps and ended up going with a simpler custom solution.
    In any case, just thought I’d let you know.
    This was still very helpful, thanks!

  3. In regards to the “small increment: bug that Dimitrios is speaking about, I was able to solve that by changing:

    o.sliderOptions.stop = that._slideTime;

    to

    o.sliderOptions.start = that._slideTime;

    So that it’s not updating when you stop sliding, but rather when you start sliding.

  4. Thnx for nice plugin! :)

    It seems that it has small problem – when i move the slider and stop it (but still holding mouse button) – it shows me one time.
    If i release mouse button – it show other (next or previos).
    Like _slideTime() didnt handle last slider move.
    Can you fix that?

  5. Here is the fix for this problem:
    in ‘_slideTime:function (event, ui) {‘
    change
    ——————-
    if(that.slider( “option”, “range” )){
    startTime = that.timeslider(‘getTime’,(that.slider(“values”, 0)));
    endTime = that.timeslider(‘getTime’, that.slider(“values”, 1));
    ——————-
    to
    =============
    if (that.slider(“option”, “range”)) {
    if (ui) {
    startTime = that.timeslider(‘getTime’, ui.values[ 0 ]);
    endTime = that.timeslider(‘getTime’, ui.values[ 1 ]);
    }
    else {
    startTime = that.timeslider(‘getTime’, (that.slider(“values”, 0)));
    endTime = that.timeslider(‘getTime’, that.slider(“values”, 1));
    }
    =============

  6. is that possible to send selected time to pre-defined inputs?

    something like:
    startInput: ‘#startInput’,
    endInput: ‘#endInput’,

  7. The issue with it displaying 12 AM instead of 12 PM is solved by changing the following;
    from:
    if (hours === 0) {
    hours = 12;
    }

    if (hours > 12) {
    hours = hours – 12;
    time = “PM”;
    }
    else {
    time = “AM”;
    }

    to:
    if (hours === 0) {
    hours = 12;
    time = “AM”;
    }
    else if (hours === 12) {
    time = “PM”;
    }
    else if (hours > 12) {
    hours = hours – 12;
    time = “PM”;
    }
    else {
    time = “AM”;
    }

  8. Wow, this is so awesome!

    Here have some more requests lol:

    The ability to set the max time not be in the future.. So for a form which asks when did this happen? you wouldn’t be able to choose a time that hasn’t happened yet..

    How to set the start & end times from 2 form inputs (like the same ones which it changes when you set the addInputs variable which I hacked to find the right inputs in my particular form…) This way when a form is rejected by the server for something (like some other field not being filled) then the slider will maintain the correct locations.

    Just my thoughts, cheers anyways!!!

  9. Hi,
    thanks for this work. Two quick questions:
    * Is this functionality now largely provide by the slider in JQueryUI?
    * Is it possible to have >1 selected ranges in your slider? I need to be able to create multiple selected ranges across the breadth of the slider

    Thanks again,

    John K.

  10. hi just wondering how you’d go about setting a default value from a time?
    say my value from the server was a string i.e. 15:35 how would i initialise the time slider to that value?
    Cheers,
    Tom

  11. How do I add tooltips on the moving handle for start and end?
    Ur help will be greatly appreciated. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>