Horizontal Slider
AI Pass+slider
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Slider component
About Horizontal Slider
A minimal volume-style horizontal slider with an animated speaker icon, an accent track on a dark canvas — speaker wave arcs respond to the volume level and collapse to a mute glyph at zero.
Features
- Horizontal orientation with a left-anchored fill driven by
--fillandtransform: scaleX - Animated speaker icon with volume-responsive wave arcs and a mute state at zero
- Thin 2px rail with a glowing amber dot thumb that scales on hover and drag
- Real pointer dragging with pointer capture for smooth cross-boundary tracking
- Eased value animation between steps using a cubic-out curve via requestAnimationFrame
- Full keyboard support with Arrow, Home, End, PageUp, and PageDown keys
- Exposes
role="slider"with a complete set of ARIA value attributes - Fully respects
prefers-reduced-motion
Accessibility
- Slider role
role="slider"witharia-valuemin,aria-valuemax,aria-valuenow, andaria-label- Live value text
aria-valuetextupdated to a spoken percent on every change- Keyboard navigation
- Arrow, Home, End, PageUp, and PageDown adjust the value
- Focus indicators
:focus-visiblerenders an amber outline offset from the rail- Decorative markup
- Rail, fill, thumb, and icon are marked
aria-hidden - Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Horizontal 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.
Explore Other Components
View all
Vertical Slider
VanillaReact
A console-fader vertical slider with a bottom-anchored LED fill, an engraved tick scale, a machined fader cap, and full keyboard support — Mixdown design system.
#slider#vertical
Credit Slider
VanillaReact
A step-based credit slider with animated counter, gradient track, snap-to-step dots, drag interaction, and live price summary.
#slider#pricing
Range Slider
VanillaReact
A token-driven single-thumb range slider with a filled track, a floating value bubble above the thumb, step marks, and full keyboard support — fully design-system agnostic.
#slider#range#input
Dial Slider
ReactVanilla
A rotary dial control with pointer and keyboard input, live value output, and accessible slider semantics.
#slider
Dual Range Slider
VanillaReact
A token-driven dual-thumb range slider that selects a min–max range with a filled track between the thumbs, crossover prevention, and full keyboard support — fully design-system agnostic.
#slider#range
Confidence Meter
VanillaReact
A five-block confidence threshold meter backed by native radio inputs — click a block or drag across the meter to snap the threshold, watch the brand gradient update while a quiet crossfading readout follows — themed by the AI Steppers design system in both light and dark.
#input#slider
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
