Binding a slider to an input field

Hi everyone,

I am trying to recreate the behavior of the tariff calculator on this site: https://www.eon.de/pk/de/strom.html

I have so far managed to create a discrete slider that, upon being dragged, sets the value of an input field to a fixed increment (1000, 2000, 3000, and so on). Now I also want the user to be able to type any value into the field and thereby set the slider to the closest increment. I tried to accomplish this by moving the slider handle whenever the text on the input field changes. However, that of course triggers the slider’s OnMove action, which in turn sets the value of the input field - so we end up in a loop and the prototype crashes.

Example (minus the crashing) can be found here.
And here’s the RP file:

Maybe I’m missing something, so does anyone know an easy way to get this to work?

Thanks a lot in advance :slight_smile:

Hi!

Move all the code from the slider handle’s OnMove interaction to its OnDrag interaction, just below the existing line). Upon pasting, be sure to toggle the first pasted line’s ELSE IF to an IF.

This way you can move the slider handle OnTextChange without getting into that loop.

I would like to do something similar. Can you share your rp file? I don’t see it in your text.

Hi @Luxxer, I had to dig a little, but found the sample file I had created for my post above. I don’t think I ever got it to work properly, but feel free to play around with it.

Slider.rp (80.4 KB)