Complex Slider Drag Help

Hi guys,

This is my first principle post and i really need your help.
Im going nuts over a slider prototype ive been wanting to make.

I wanted to protoype a calculator that adapts when one drags the slider hot spot, so the following to happen:

-Numbers in Title to change (2A + 1A)
-Numbers in Sub Title to change (1B)
-Number in borrow button change (1C)
-Move either top or bottom slider and it fills up as you drag it (1 + 2)
-Numbers in floating banner in top or bottom slider to change (2B)

I ve seen many slider examples created in principle where the actual bar never fills up, only the radial circle moves. So the complexity level is lower.
This is my main challenge.

Then connecting a drag animation to a number. is this possible?

Many thanks in advance.
Sorry for the bomb.

I don’t have much time now to do the whole example, but here’s a slider I’ve done a few days ago and that hopefully will give you ideas of how to do it.

It uses page scroll type (not normal scroll or drag).

In your example you just have to include a few more text fields that will be changing as the one in my example, yours just need a few more, but they all would react to the slider position using drivers.

Hopefully this will give you a good starting point to achieve your design, let us know how you get on and don’t forget to share the final result!

PS: Once you set the initial and end state of the slider and the position of the values, you may need to adjust manually as some values will fall in between and won’t be shown properly, you can see within my file all the little adjustments I’ve done for this one in the drivers timeline.

Link to .prd file:


1 Like