Hi!

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) ]]
```

…where `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 `slider`

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**

Preview

File: Filters_PriceSlider.rp (85.1 KB)