Dual Range Slider

Features

• Caret's checked-in default primary is already the same orange used by its histogram, while the browser toolbox owns design-system selection.
• Two independently draggable thumbs selecting a minimum and maximum value
• Filled track between the thumbs positioned via --lo and --hi custom properties
• Crossover prevention so the minimum can never exceed the maximum
• Real pointer dragging with per-thumb pointer capture
• Zero-lag drag tracking — pointer moves commit instantly with no easing or transition delay
• Full keyboard support with Arrow, Home, End, PageUp, and PageDown on each thumb
• Crisp interaction feedback — thumb spring scale on hover and grab, tooltip tick per step, fill pulse and field commit/shake animations
• Each thumb exposes role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax
• Live "min – max" readout above the control
• Responsive panel that adapts padding down to 260px
• Fully respects prefers-reduced-motion

Accessibility

Slider role

Each thumb uses role="slider" with aria-valuenow, aria-valuemin, aria-valuemax

Crossover guard

The minimum is capped at the maximum and vice versa in JS

Keyboard control

Arrow keys step, Home/End jump to bounds, PageUp/PageDown move by a larger step

Focus indicators

:focus-visible with a --ring indicator on all interactive elements; the range handles carry a --dr-thumb-ring-width band fenced by --surface separators so it stays legible where it crosses the filled track

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Dual Range Slider in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the slider is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.