Take the 2-minute tour ×

I try to connect 3 jquery ui sliders.

The sum of the 3 values must always stay at 100, so when a slider is moved the two others must moved.

I made something, it works but it is very slow: http://jsfiddle.net/vBsTR/2/

If you just connect one slider it works fine (try to move the first one): http://jsfiddle.net/tyjJx/2/

Can anyone help please? Thanks!

share|improve this question
It's very slow? There is infinite recursion so it doesn't even run ;o –  Esailija Apr 22 '12 at 18:51
Put somewhere the 'PANIC' button into your Fiddle before posting ;) –  Roko C. Buljan Apr 22 '12 at 18:52
I updated the second link, it works fine.. What is this PANIC button? –  pol Apr 22 '12 at 18:59
It works quite decently for me if I just remove the slidechange event bindings. –  ZeroOne Apr 22 '12 at 21:22
You're right! if we just drag & drop the handle it works fine! jsfiddle.net/vBsTR/3 But it doesn't work if you click on the slider's background.. –  pol Apr 22 '12 at 21:47
show 1 more comment

2 Answers

I was looking for an answer to this as well and ended up writing it from scratch


share|improve this answer
add comment

You may check event.originalEvent before your refresh function:

event.originalEvent && (event.originalEvent.type == 'mousemove' || event.originalEvent.type == 'mouseup') && refreshSliders(1);

Use event.originalEvent to detect whether the value changed by mouse, keyboard, or programmatically.

This is your example in action

share|improve this answer
Thank you! Now I understand why it didn't work.. Everything is OK now, but I can see one more problem, if you click on the slider's background to change the value sometimes the total is bigger than 100.. jsfiddle.net/tyjJx/7 –  pol Apr 22 '12 at 22:32
add comment

Your Answer


