iOS slider

An example of recreating the iOS slider using Motion for Vue. This example uses useTransform to map input to slider state, and slider state to pull, squish and squash animations. It uses Vue's onFocus and onBlur to set up keyboard-accessible inputs, with Motion's whileFocus prop to animate a custom focus indicator.

Loading...

Motion Studio

Motion Studio

Enhance your AI code editor with this example

Use Motion Studio to create new components or infuse static designs with animations based on "iOS slider" and 330+ other examples.

Latest Vue examples

Motion is supported by the best in the industry.