Skip to main content

Home / Experiments /

Circle Slider

Pick a control

Choose how you want to set the number, then try it in the section below.

Settings save to this browser automatically. Reset all clears them.

Circle Size (radius) Grey arc thickness Black thumb thickness Thumb length (° along arc)

Radial fade Duration (show & hide) Blur (rest → sharp)

Feel Sensitivity (lower = finer steps) Flick boost (fast spin multiplier) Pull-out ease (start scale, 1 = off) Pull-out distance (px past activation, 0 = off)

Extra motion tuning lives in DEFAULT_CONFIG in circle-slider-config.js if you need it.

Interaction Activation drag (px)

Rotation pivot Card centre (thumb follows finger) Initial press

Leave card before arming (card centre only; avoids middle flip) Grey arc lag (°) Release inward cos (min; 0 = tangential ok, 1 = strict toward centre) Release direction min speed (px/frame; below = skip direction check)

Value Reset target

Reset value jumps the display to this number (and clears fractional carry).