Range Slider

Features

• body.dark redeclares them to prevent injected token inheritance leaks; the semantic roles are explicitly redeclared in dark mode.
• The slider is labelled by the visible title and keeps a design-system-driven hit area of at least 44px.
• Custom filled track driven by a --fill custom property and transform: scaleX for GPU-friendly updates
• Floating value bubble that appears above the thumb on hover, focus, and drag
• Evenly spaced step marks rendered along the rail
• Real pointer dragging with pointer capture so the drag continues outside the control
• Full keyboard support with Arrow, Home, End, PageUp, and PageDown
• Exposes role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax
• Dark/light theme toggle with smooth transitions
• Responsive panel that adapts padding down to 260px
• Fully respects prefers-reduced-motion

Accessibility

Slider role

role="slider" with aria-valuenow, aria-valuemin, aria-valuemax, and aria-valuetext

Keyboard control

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

Decorative parts

Rail, fill, ticks, thumb, and bubble carry aria-hidden="true"

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open 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.