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>