When dealing with a slider, I find it’s useful use an expression that gives you the current value of the slider. Then you can use that number to calculate a bunch of different of things: the x location of the tooltip, for example, but also the price for the given slider value.
A useful output value for the slider is 0 when at the far left and 1 when at the far right. So if the slider is halfway, this value would be 0.5.
You can calculate this by dividing the x location of the slider handle (your Trigger widget) by the maximum distance the slider handle can travel. That distance is the width of the slider minus the width of the handle, assuming the handle stops at each end of the slider. So…
set text on v_sliderVal to [[ Target.x / (slider.width - Target.width) ]]
Target is the handle and
slider is a local variable referring to the slider (here, your “grey bar”). Note that this assumes that the grey bar is placed at x=0 in the dynamic panel.
So let’s assume the slider is 1050px wide and the handle is 50px wide. The maximum travel is then 1000px:
- If the slider handle is at x=0, or all the way left, then 0 / 1000 = 0
- If the slider handle is at x=1000, or all the way right, then 1000 / 1000 = 1
- If the slider handle is at x=500, or in the middle, then 500 / 1000 = 0.5
Now you can use this number to place the tooltip. The maximum distance the tooltip can travel (if you want to keep it within the bounds of the slider) is the width of the slider minus the width of the tooltip. So assuming
sliderVal is this 0-to-1 value that you’ve already calculated, and
tooltip are local variables referring to those two widgets:
Move tooltip to [[sliderVal * (slider.width - tooltip.width) ]]
Likewise, you can use the slider value to calculate the price. Assuming
min is the minimum price and
max is the maximum price, and
sliderVal is this 0-to-1 number:
Set text on price to [[ min + sliderVal * (max - min) ]]
Since you don’t want an additional 10 digits after the decimal, you can use a function to round it:
[[ (min + sliderVal * (max - min)).toFixed(0) ]]
I updated your file. I also added the ability to round to the nearest unit, in this case, the nearest 10. You can set this to 1 if you want it to the nearest 1. The explanation of that math is here.
Note: I also changed the left and right limits of your drag command. They now use greater than/less than or equals
File: Filters_PriceSlider.rp (85.1 KB)