Connect three slider to 100%

Axure RP 9
1

Hi all,

I’m trying to connect three slider together. The maximal amount of both slider ist 100%.
If i drag one slider to 40% the othter have to be 100%.

I want to connect three sliders together. All three sliders together should give 100%.

For example:
Slider 1 = 30%
Slider 2 = 40%
Slider 3 = 30%

How can I achieve that if I change one slider, the others adapt?

I found this example: http://jsfiddle.net/nFDug/

My file: Slider-V1.rp (59.6 KB)

if anyone can help it would be really appreciated!

Thanks!

2

@enjoni
I can’t see your file as I haven’t upgraded to Axure 9 yet, but based on the jsfiddle I have an idea.

I approach it something like the following, however the following may not work 100% as expected, depending on how exactly your sliders work. You’d have to modify the Move, Set text or both to fit your requirements.

You could do this with Properties > OnMove and add if statements to your OnMove event. You would evaluate the sum of the other 2 sliders to the one you are moving.

if "[[Slider1.value + Slider2.value + Slider3.value]]" is greater than 100
And "[[Slider2.value > Slider3.value]]"
Set text on (where your value is stored for Slider 1) "[[Slider1.value + This.scrollX]]" // If you're storing the values
Set text on (where your value is stored for Slider 2) "[[Slider1.value - This.scrollX]]" // If you're storing the values
Move Slider2 by "[[This.scrollX * (-1)]]"

else if "[[Slider1.value + Slider2.value + Slider3.value]]" is greater than 100
And "[[Slider2.value < Slider3.value]]"
Set text on (where your value is stored for Slider 1) "[[Slider1.value + This.scrollX]]" // If you're storing the values
Set text on (where your value is stored for Slider 3) "[[Slider1.value - This.scrollX]]" // If you're storing the values
Move Slider3 by "[[This.scrollX * (-1)]]"
3

Hi Josh,

I’m sorry but i can’t save Axure 9 Files to Axure 8.
I tried your suggestion but I can not get it to work. Maybe my slider works differently. I made some Screenshots of my file I hope it helps to understand my problem.

1
11650×1476 232 KB
2
22270×2206 442 KB
1
11650×1476 232 KB
2
22270×2206 442 KB

4

Looking at your example I would remove:
Set Text
Percent1 to “[[Slider1+This.scrollX]]”
Percent2 to “[[Slider1+This.scrollX]]”

You need to add 1 more if case:
NEW3
Else IF “[[Slider1+Slider2+Slider3]]” is greater than “100” and “[[Slider2]]” is equal to “[[slider3]]”
Move Switch2 by ([[This.ScrollX*(-0.5)]],0)
Move Switch3 by ([[This.ScrollX*(-0.5)]],0)

Copy everything under OnMove and place it under the OnDrag Case 1.

  1. Case 1
  2. NEW
  3. NEW2
  4. NEW3

Then delete everything under OnMove.