'change' event problems with JQuery UI slider

Question

I have a slider functionality built using JQuery UI. It is supposed to behave like this:

The slider is activated/deactivated 20 times. Each turn is a 5-second period, during which the first 2 seconds the slider remains disabled, and the slider handle is hidden. After that, user can use mouse to click anywhere on the slider to place the handle and select a value. After the click, user can also use the left/right arrow keys to adjust the handle. At the end of the 5 seconds, three things happen: 1. the slider is disable; 2. the handle is reset to the minimum value; 3. the handle is hidden. Then there is a 1-second timeout before the next turn restarts.

A working example is here: http://jsfiddle.net/e2rym/

I've noticed two issues, which both happen under the same condition: user uses both mouse and keyboard to adjust the handle position on the slide at the end of the 5-second period. One can simulate this by continuously and quickly clicking on the slide while pressing left and/or right keys at the same time at the the end of each turn.

If you do this, one of the two things will happen (not every time but definitely reproducible after a few tries):

1. The handle will get stuck at the last position you clicked rather than being reset to minimum and hidden. It seems like that if you click or move keys continuously and fast enough then a change event will fire after the reset actions (i.e. slider disabled, handle moved and hidden) happen.

2. Even worse, sometimes the the slider will be disabled and the handle will be hidden, but in the following 5-second periods, no change event will ever be fired no matter what you do on the slide, i.e. clicking mouse or pressing left/right key does not position the handle at all. Therefore, the slider becomes totally unusable for all the subsequent periods. I feel that this is related to the possibility that two change events are fired (one by clicking the mouse, the other by pressing the left/right key) at the same time when the reset actions happen.

Any idea why these problems happen and how to fix them would be much appreciated.

P.S. I've tried multiple versions of JQuery UI and JQuery, but the problems persist.

Answer 1

I unfortunately can't explain the problem, but I did manage to make it go away by changing your change event to a start event (which I suppose will not work if you are specifically using change events for something else).