Issue: In user tests, people were confused about the "jumping" pointers and the way the pointers are moved. Also, it is not well usable on mobile.

Suggestion: Integrate the pointers in a slider components which we slightly enhance.

Spec:

• Pointers can be moved by Drag and Drop
• Pointers can be moved by clicking on the slider
• If the blue slider is moved past the yellow one to the left it will push the yellow slider instead of being placed left from it (and vice versa)
• Pointers should actually touch when trying to move them past each other to show why one moves with the other.

Not fully decided, but suggestions exist:

• Should the sliders end where the other pointer starts

OR go past each other like

OR go past but have some indication: (I would go for the latter)

• Probably, we want to make the slider area that reacts to the user input a bit bigger than the visible element to the top/bottom (exact area needs to be found out)

Usability Rules: Visibility, use of Standard Elements