Custom Slider Control

How-to Discussions
#1

Hey fuse-lovers!

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.

28

As you can the slider consists out of two main parts:

  1. The circle which progresses with a line each step (preferably with micro slide animation)
  2. The bottom part which changes the color based on the current step

Thank you so much!

#2

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!