jquery slider, time picker and reserved times..

Question

I am using a jquery slider to pick a start and end time That is fine, but I need to add restrictions to it. Basically, I've got a window of availability that I need to chip away at. So in my example: http://madeeasyfor.me/stackoverflow/time_pick_test_1.html

(I've commented the validation function so you can see the slider, the code has absolute paths to all scripts so feel free to get a view source dump for local use)

I've got a 24 clock. With a dynamically generated PHP script, I want to add various booked times.. so when the user tries to select a pre booked time, they'll get an error (pop up, whatever). For now, I'm hard coding my booked times.

I can't for the life of me seem to get the slider to recognise the pre booked times selected.

If I'm not clear about anything, please ask... I could just do the checks in PHP once the user has selected a time, but I'd like the user to be instantly made aware. (Ideally, I'd like to colour the slide bar to flag the prebooked times.. but that's another issue... ;-p

Tris...

Answer 1

Try using the 'slide' event in jQuery UI (http://jqueryui.com/demos/slider/#event-slide). When the user slides the handle, the slide event is triggered. In the slide event you can check if the selected time is pre booked, if true, you can return false. When the slide event returns false, the user isn't possible to slide the handle to that point.

For example: This prevents the user from selecting something between 40 and 50:

$('#slider').slider({
    range: true,
    values: [17, 67],
    slide: function(event, ui) {
        if(ui.value > 40 && ui.value < 50){
            return false;
        }
    }
});