Creating linked sliders with CJuiSlider?

This is what I would like to accomplish:

  • 6 sliders total

  • Each slider can be adjusted according to a specific fixed range (ex: 10-70)

  • The sum of all six sliders total should only be able to add up to 100 max

In other words, each slider can move within a specified range so long as the sum of all six sliders is equal to or less than 100.

In my case, this is what I would need:

Slider #1

Range: 0-60

Slider #2-5

Range: 10-70

Slider #6

Range: 0-70

For example, if slider #1 was set to 55, sliders #2-5 were set 10, then slider #6 would only be able to go to 5 before it stopped.

Any tips on how I can accomplish this using CJuiSlider?


Is this even possible using CJuiSlider?


I guess you would write manual jQuery code. For that, you can check jQuery UI Slider documentation (which CJuiSlider encapsulates), especially, the change event, which you would attach to each of your sliders, checking their values to dynamically limit the range of others (using for instance the ‘max’ property).

And maybe you can make use of CJuiSlider options property to declare your change event js function, although I’m not sure of this one.