0279

Duolingo Math Slider

Duolingo Math Slider

This interaction showcases a horizontal slider used for a math puzzle. The user drags a custom house-shaped slider thumb along a number line, which snaps dynamically to each tick mark with subtle spring physics. When a value is selected, the primary action button transitions from disabled gray to active green. Upon tapping 'Check', the slider elements turn green, a success banner slides up from the bottom, and a streak badge pops in with a bouncy scale-up animation while the progress bar fills.