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
Pingback: Using a jQuery UI Slider to Select a Time Range | Marc Neuwirth's Blog
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!