Slider with number values

Axure RP 8
1

Hi,

I’m currently trying to build a food cost calculator.

I’ve created the slider, but I would like to make the number values below and to the right change values as the slider moves up and down.

I can’t find anything online to direct me. If anyone has the time could they talk me through it.

Thanks!
Amelia.
[ATTACH]12386[/ATTACH]
slider.rp (68.6 KB)

2

Hello Amelia,

Could you please explain how would I calculate the values below the slider?
Is the “percentage cost” = “Food Cost” / “Price Less Cost”? If so, then, wouldn’t the percentage keep dropping as the “Price Less Cost keeps” increasing?

Regards

Edit: And what is the max value that the slider can go up to?

1 Like
3

Hi! The trick is to take the fraction of the slider handle’s position between the beginning and end of the slider (e.g. 0.5 would be halfway) and multiply this by the maximum value of the slider.

You can calculate this as follows, assuming you put the script in the dragged slider handle (which is the “This” in the expression below), and that LVAR_back is a local variable referring to the slider’s track object (named Background in your file). The following assumes your slider goes to 100

Set text on (whatever) to [[ (This.left - LVAR_back.left)/(LVAR_back.width - This.width) * 100]]

You’ll probably want to round this to a certain number of decimal places, so…

[[ ((This.left - LVAR_back.left)/(LVAR_back.width - This.width) * 100).toFixed(2) ]]

…will give you 2 decimal places.

1 Like
4

Thanks,

Price can go from 0 to £20
The price is the price the retailer is setting

food cost (£0.6570) won’t need to change. This will stay the same.

Price less cost is the slider price minus the food cost amount (£0.6570)

Percentage cost is what percentage of the slider price is the food cost amount (£0.6570)

5

Here is one I put together that works.
You can change the minimum and maximum values, and format the number any way you like.

range_sliders.rp (77.9 KB)

  • Edit: fixed default value issue, and issue when resizing width of the slider track