I really want to implement the following custom slider control but I can not currently figure out how to do it properly. I would be really grateful if someone could help me out.
As you can the slider consists out of two main parts:
- The circle which progresses with a line each step (preferably with micro slide animation)
- The bottom part which changes the color based on the current step
Thank you so much!
So just brainstorming some ideas:
You could use Observables with a
<WhileTrue> or a
<WhileFloat> for each step or use a
<StateGroup> to switch between the different states or steps.
For the top layer, you can draw 3 circles and 2 rectangles for the green background, perhaps using a grid to align them, then draw a second set of white ones with shadows on the circles. The white rectangles can have their X position adjusted to touch the smaller white circle. Use
<Change /> when the state changes to increase the width of the rectangle with a duration between states/steps and voila!