Incremental Slider

Axure RP 8
2

Hey there Hong Kong Phooey,

At the bottom of this post you’ll find an edited version of your RP file. Pop it open and read on.

To get the text on the “displaySumInsured” text field to change as the “sliderThumb” dynamic panel is dragged, I set up several conditional cases under the "sliderThumb"s OnMove event that check to see which of the “increments” vertical lines the DP is being moved over:

To get the “sliderThumb” DP to move when the slider bar is clicked, I used the “saddlerySlider” DP’s OnClick event:

The Y value here is Target.y. “Target” is an object that refers to the widget being targeted by the action. Using this value maintains the “sliderThumb” DP’s current Y value.

The X value breaks down like this:

  • Cursor.x is the cursor’s X value.

  • (Target.width/2) is the width of the “sliderThumb” DP divided in two. Subtracting this value from Cursor.x lines the center of the DP–rather than its left edge–up with cursor. (Remember that coordinates are determined by a widget’s top-left corner.)

  • This.x is the “saddlerySlider” DP’s X value. (‘This’ refers to the widget whose event is firing.) It’s necessary to subtract this value because coordinates for widgets inside DPs are relative to the boundaries of the DP, not the browser window. E.g., moving “sliderThumb” to X = 30 would place it 30px to the right of its parent DP’s left edge and not 30px to the right of the browser window’s left edge. Subtracting the parent DP’s X value accounts for this offset.

I hope that this is all clear. If you have any questions, please let me know.
incrementalSlider_EDIT.rp (88.8 KB)