Exertion Spectrum Slider
A dark rating sheet with rounded top corners over a page whose blurred traces show through: "How hard was it?" and a grey subtitle, one huge white numeral from 1 to 10 (112 pt bold), the level's name ("Very Light") and one or two grey lines describing it, then a slider, "Clear Entry", "How to Self-Assess" and a full-width Save button. The slider's track is a 9 pt line filled with a spectrum (teal, sky blue, yellow, orange, red, magenta, purple) with a dot between levels, lit from the usual range to the thumb and shaded beyond; a band of grey diagonal hatching marks everything outside the "USUAL RANGE", and the thumb is a white disc with a dot in the colour under it. Touching the slider swells the track into a wedge, 9 pt at the left and 54 pt at the right, and fills the thumb with its colour; dragging rolls the numeral like a counter wheel with a vertical blur at every level, cross-fades the name and description, and runs Save's fill along the spectrum. Outside the usual range the hatching between the range and the thumb takes the spectrum's colours, a red "ABOVE USUAL RANGE" or cyan "BELOW USUAL RANGE" tag pops in over the thumb in place of the caption, and Save gains a second line; letting go shrinks the track back, and "Clear Entry" sends the thumb home.
Is this your design? Ask for a correction or removal
React Native · Expo SDK 52+, TypeScript
✦ If the result drifts from the video, tell your agent what looks different and how it should look. A short correction usually closes the gap.