Time Range Slider

Create a time range slider. A horizontal 24-hour track whose background IS the day: a linear gradient running night-ink at the edges through dawn orange into full daylight orange at the middle and back. The reader sees morning, noon, and night before reading a single number. Above it, a bold tabular-nums readout ('09:00 – 17:30'). Two round thumbs (surface fill, 2.5px accent border, soft shadow) mark the start and end; between them stretches an accent selection band at ~55% alpha, rounded like the track. Dragging: pointer capture per thumb, map pointer x to hours as fraction × 24 snapped to 15-minute steps, clamp so the thumbs can never cross (keep at least 30 minutes between them). While dragging, position updates are instant (no transition); released or programmatic changes ease over 0.3s so preset jumps glide. Set touch-action: none on the track so touch drags don't scroll the page, and put small muted markers under the track (00:00, noon, 24:00) as anchors. Offer preset jumps (work day, morning, evening) as quick-pick buttons beside the slider. Pressing one is what triggers the eased glide, and nothing presses them on a timer. Accessibility: each thumb is role="slider" with aria-valuemin/max/now and an aria-label ('Start time 09:00'), arrow keys stepping 15 minutes; the readout is aria-live="polite". If prefers-reduced-motion is set, drop the glide: all updates instant. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.