Set size + position on drag

Axure RP 9
9

Hi!

Yes. You can use this “function” trick I mentioned so that each bar checks itself to see if it should light up or not.

You’d add code like the code below to each bar. The code will be exactly the same for each bar, so once you get the Moved event it working for one bar, you can just copy/paste the whole Moved event (containing both conditions) to all bars. Or, you can just delete all of the other bars, and then copy/paste the working bar over and over…

Note that this assumes that you are using the bar’s Disabled style effect to make the bar inactive.

On Moved (of a bar: this is the "function" you will call by moving this bar by 0,0)
  If value [[LVAR_handle.left + LVAR_handle.width/2]] is greater than or equals value [[This.left + this.width/2]] 
    Set enabled of this to true
  else if
    Set disabled of this to false

The code assumes that the bar lights up when the center of the slider is at or to the right of the center of the bar. That’s what the +this.width/2 part is is for. (The left of something plus half its width gives you the center of that something.)

Then, important! In the handle’s Dragged event, move all of the bars by 0,0.

I set this up on the first set of bars.

Filters_PriceSlider (1).rp (70.0 KB)

1 Like