iOS slider
An example of recreating the iOS slider using Motion for React. This example uses useTransform to map input to slider state, and slider state to pull, squish and squash animations. It uses React'setModal onFocus and onBlur to set up keyboard-accessible inputs, with Motion's whileFocus prop to animate a custom focus indicator.
Introduction
The iOS slider example recreates the playful brightness slider found in the iOS shortcut screen using Motion for React. It features an intuitive drag interaction with a satisfying elastic pull effect, squish and stretch animations, and keyboard accessibility.
In this tutorial, we'll learn to use:
useMotionValueto track the slider's progressuseTransformto map values between different ranges- The
motioncomponent to create interactive animations - Gesture handling with
onTapStart,onPan, andonPanEnd - The
whileFocusprop for animating keyboard accessibility highlighting