Rather than typing out all the times, put markers at the hour and half hour, maybe 15 minute points. Position these using css %s just as slider handle and range elements are done. Also, using the slide callback you can position and update tooltips near the handles, or a label elsewhere showing the currently selected range.
You could treat each step of the slider as 1 minute. Then calculate the times by adding the minutes and formatting as HH:MM. So the init for a slider that allowed you to select a range between 9am and 1pm and defaulted to 9:30 - 12:30 might look this:
- $('#timerange').slider({
- range: true,
- min: 0,
- max: 240,
- step: 1,
- values: [30, 210],
- slide: updateTimeLabels
- });
There are a lot of minutes between 5:30am and 8:30pm, so you'd have to have a pretty big slider to ensure the user is able to precisely select down to the minute using the mouse. Though they could use the arrow keys for the last part of the selection, the fine tuning.
It would take some experimenting with events, but you might be able to set the step to 5 minutes, for use with the mouse, then detect when the keyboard is being used and revert the step to 1 minute, then back to 5 for the mouse again. Just an idea.
Also, be sure to check out, if you haven't seen, this fantastic demo and widget by the Filament Group:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/ 
