Credit Slider
AI Pass+slider#pricing
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 Credit Slider
A step-based credit slider with animated counter, gradient track, snap-to-step dots, drag interaction, and live price summary.
Features
- Seven discrete credit steps (500, 750, 1,000, 1,500, 2,000, 3,000, 5,000) with snap-to-step behavior
- Animated counter that eases between values with a cubic-out curve
- Gradient track fill with a soft glow layer that intensifies during drag
- Custom thumb with a pulsing halo and inner accent dot
- Step dots along the track that distinguish filled from unfilled states
- Clickable credit labels below the track for direct step selection
- Live price summary showing total price, per-credit rate, and savings percentage
- Pointer drag with capture for smooth cross-boundary interaction
- Keyboard arrows to step through credit amounts
- Fully respects
prefers-reduced-motion
Accessibility
- Slider role
role="slider"witharia-valuemin,aria-valuemax,aria-valuenow, andaria-label- Keyboard navigation
- Arrow keys step through credit amounts in both directions
- Step labels
- Each visible credit label is a focusable button with an
aria-label - Keyboard activation
- Credit labels are native buttons activated by Enter and Space
- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Credit 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
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
Horizontal Slider
VanillaReact
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.
#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
Radial Share
ReactVanilla
A radial share speed-dial — a central share FAB fans four social spokes (Instagram, LinkedIn, Threads, YouTube) out along a springy clockwise arc, framed by a connecting accent ring and soft halo, closes on Escape or outside click, fully token-driven and design-system agnostic.
#social#radial
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
