3 jquery ui slider connected

Question

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!

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! http://jsfiddle.net/vBsTR/3/ But it doesn't work if you click on the slider's background.. — pol, Apr 22 '12 at 21:47

score 1 · Answer 1 · answered Aug 29 '12 at 17:13

1

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

answered Aug 29 '12 at 17:13

Jay

score 0 · Answer 2 · answered Apr 22 '12 at 21:55

0

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

answered Apr 22 '12 at 21:55

avrelian

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.. http://jsfiddle.net/tyjJx/7/ – pol Apr 22 '12 at 22:32
@pol your example seem to work only from 2 to 2 increments. What if you have 10 sliders? Not sure the solution is very scalable. – alex toader Jan 21 '21 at 16:58

2 Answers2