Sexy slider bar challenge!

[tom-ii]

Hi,
I want to implement a three step slider that “kind” of look something like this.

Please ignore the advanced animations inside the slider. What I would love is a slider with a changeable image on its knob. Does anyone know how to this? Is there any plugin that could be bend to do this?

TOM

[josh10]

My Apps are currently updating, so I’ll take a stab at this. You could create a group with heavily rounded corners. Then , create a state for each point in your movement of the turtle to rabbit. You would then need to have an image for each animation frame. Finally, do the workflow for each scenario.

Unfortunately, this will not be a true slider. It will really only be a visual representation of activity on the screen. Now someone else in the forum will probably give a solution that is 10X better than the one I gave.

[tom-ii]

Thanks for the input Josh

Yeah, the interactive part is probably the tricky part right?

So to unpack this;

1. How do you create a slide-able element (constrained to its width and the x-axis)?
2. How do you change its content depending on which state it is in?

Tom

[josh10]

It’s not quite as slicks as what you have, but you have animate the icon appearance and disappearance based on a user action. So you can animate “slide right” based on the user clicking continue. However, it won’t let them directly slide the elements.

The states I’m referring to are custom states. When you click an element, input, etc…an editor pops up. At the top right, you will see a small info icon. You click that and add custom states here. I usually add them to groups. When I’m building workflows, I will define a state based on different user action. Ex. User clicks button, change state of group to X.