iOS slider

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.

Get started

Let's start with the HTML structure and styles for our slider:

<div class="container">
    <div class="slider" tabindex="0">
        <div class="indicator"></div>
        <div class="icon-container">
            <!-- Copy sun icon from example source code -->
        </div>
    </div>
</div>

<style>
    /** Copy styles from example source code */
</style>

The .slider element is our interactive control. Inside it, the .indicator fills from bottom to top based on the slider value, and the .icon-container holds a sun icon. Notice touch-action: none prevents default scrolling behavior during drags, and will-change: transform optimizes animations. The focus-visible style provides keyboard accessibility feedback.