iOS slider
Matt Perry
In this tutorial, we're going to build the iOS slider example step-by-step.
This example is rated expert difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The iOS slider tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The iOS slider example recreates the polished feel of iOS brightness controls with overscroll physics and springy animations. When you drag past the slider's bounds, it squishes and stretches naturally before snapping back into place. The example also supports keyboard navigation with arrow keys.
This tutorial uses several Motion+ APIs: motionValue creates reactive animation values, mapValue transforms values through input/output ranges, transformValue creates computed reactive values, styleEffect automatically updates element styles, and animate creates spring animations. We'll also use utility functions like mix, clamp, and progress from Motion.
