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
Recently I was trying to create a web form where a user could enter a start time and end time to create a time window for a schedule. However, the easiest solution – having a user enter the times into two text boxes – seemed clunky and annoying to use. I wanted a better solution that was more intuitive so I decided to try using the jQuery UI Slider for a more visual experience with less typing. My goal was to have a slider with two points to represent the beginning and end of a scheduled time range and to display the value of each point as text.
If you haven’t used jQuery UI before, the slider itself is pretty simple to setup:
<div id="slider-range"></div>
<script type="text/javascript">
$("#slider-range").slider({
range: true,
min: 0,
max: 1439,
values: [540, 1020],
step:5
});
</script>