Build an elastic range slider in an e-bike app card for a fictional maker, Coppice Cycles, on a near black page (#0c0f14). The 560px card (#161c26, 32px radius) shows a grey uppercase label "Coppice Cycles, Holloway 2", a battery icon at 82%, the question "How much help today?", a large assist mode name in the accent colour and the percentage. The slider row has a 44px round leaf button (less assist) and bolt button (more assist) either side of a 14px track with a gradient fill and a 34px white thumb inside a 44px hit area. Value runs 0 to 100 in four modes, Eco (#8be38a), Tour (#5ef2c2), Sport (#5cc8ff) and Turbo (#ffb547), and the accent colour follows the mode. Dragging past either end stretches the track with a rubber band curve (up to 70px), squashes its height and pushes the end icon outward and larger; letting go springs it back with a damped wobble. Pressing an arrow key at the limit gives the same small bump. The thumb is role slider with aria-valuetext such as "Tour, 40 percent, about 92 kilometres of range". Below, labels for the four modes and three stat tiles for range, motor help and best for. Use pointer events with touch-action pan-y and skip the stretch for reduced motion.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by relabelling the modes and stats for your own setting, such as volume or temperature.
About this range slider css
A plain range slider stops dead at its ends, which feels like hitting a wall. This range slider css lets you keep pulling. Drag past either end and the track stretches toward your finger, thins out a little and pushes the icon at that end outward, then snaps back with a small wobble when you let go. It is the same rubber band feel phones use at the end of a scroll, applied to a control.
It sits in an e-bike app where the value matters. Four assist modes colour the whole card as you move through them, the range estimate and motor help update live, and the leaf and bolt buttons step a whole mode at a time. The thumb is a proper slider for assistive tech, with arrow keys, Page Up and Page Down, and a spoken value that includes the range left.
Why the prompt works
It defines the stretch, a rubber band curve capped at 70px plus a height squash.
It separates the hit area from the visual, 44px to touch, 34px to see.
It ties colour to value, one accent per mode.
It gives the keyboard the same bump at the limits.
Where to use it
Volume, brightness, temperature and intensity controls, pricing sliders and any setting where a little give at the ends makes it feel physical.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.
