Slider's Step in Pixels

Hello,

I would like to show and hide image based on a slider in the middle of the two picture. However, I can't sync the image with the slider's pointer.

I added 2 shapes with 250 px as width, the slider's end at 50, then I started to add 10 px per step. (500 px ÷ 50 steps = 10 px per step). My equation doesn't work like I want. Any suggestions?

Thank you.

I attached the story file. (see slide 2)

4 Replies
Michael Hinze
Ghada Muhammad

Hello,

I would like to show and hide image based on a slider in the middle of the two picture. However, I can't sync the image with the slider's pointer.

I added 2 shapes with 250 px as width, the slider's end at 50, then I started to add 10 px per step. (500 px ÷ 50 steps = 10 px per step). My equation doesn't work like I want. Any suggestions?

Thank you.

I attached the story file. (see slide 2)

I don't quite understand what you are trying to do. You set up triggers that change the state of an object if the slider value is between 26 and 36. Within that range, the slider and object states are in synch (with only a minor offset that should be easy to fix). What am I missing?

FYI, here is an example of a slider changing the states of an image object.

Ghada Muhammad

Shapes are easy to control their width, but for images, it'll be challenging to show/hide parts at the exact points. There must be a way to calculate the slider's step in an accurate way.

I've seen your example before, and it's awesome. May I ask you how did you sync the slider accurately? My idea of changing the states is exhausting

Thank you.

Michael Hinze
Ghada Muhammad

Shapes are easy to control their width, but for images, it'll be challenging to show/hide parts at the exact points. There must be a way to calculate the slider's step in an accurate way.

I've seen your example before, and it's awesome. May I ask you how did you sync the slider accurately? My idea of changing the states is exhausting

Thank you.

It does take some maths amd trial&error to figure out exactly the position of both the slider and the image object. And yes, depending on the number of steps, you'll potentially end up with a lot of triggers and object states. I don't know if this would work for you, but here is an example where the top image is actually the slider thumb which is moved over the image at the bottom. This simplifies the setup a lot. And here is a slight variation where BOTH images make up the slider thumb.