CODEWITHSUNDEEP
javascriptjquerysliders
jezzipin
jezzipin

Reputation: 4254

Dynamically increase and decrease jQuery slider values

I am having a bit of an issue with regards to jQuery sliders. I've looked around on here at several examples where people seem to be asking the same question but the approved answers given never achieve what they are actually asking for. I've therefore started my own thread.

I am trying to generate a set of jQuery sliders that have a maximum total value of 1500. If one slider (sliderA) is moved to 700, the maximum total value of the other sliders (B,C,D) must be adjusted to 800. This is fine if none of the other sliders have already been moved and are at zero as the code found here jsFiddle does the trick to ensure that the rest of the sliders cannot go over 800 (whether it be a 400, 400, 0 or 500 , 150, 150 split). The real issue is that I need the sliders to decrease dynamically if the total value after each slider is adjusted surpasses the overall 1500 limit.

For example: I move Slider A to 900. Slider B was set to 500 to start with. Slider C was set to 300 to start with. Slider D was not set.

Sliders B and C should decrease proportionally based upon the value at slider A so that the overall total never surpasses the 1500 limit.

Any ideas?

Upvotes: 3

Views: 877

Answers (2)

Bhesh Gurung
Bhesh Gurung

Reputation: 51030

This is not the exact (perfect) solution you are looking for, but I think it kind of gives you an idea to get started I guess:

See it on jsfiddle.

Upvotes: 1

Becky reamy
Becky reamy

Reputation: 96

This seems like very confusing functionality. I am trying to picture what kind of user interface would need such complicated relationships between multiple sliders.

Is there a way to simplify the user interface that would perhaps avoid this issue in the first place?

Upvotes: 0

Related Questions