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

I'm not sure if I got your idea right, but I guess you don't want to let the user select certain times on the slider?

I'm building something similar at the moment:
http://www.supertext.ch/shop/werbebrief

It's in german and it's not released yet, but have a look at my javascript. I's all in the page. The user can select a timeframe, but not the weekend days that are inbetween.

I'm not using the jquery slider, but
http://blog.egorkhmelev.com/2010/03/jquery-slider-update/

Have a look and let me know if you need help.

Answer 2

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;
        }
    }
});