Confidence Meter
AI Pass+input#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.
Input component
About Confidence Meter
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.
Features
- Bare centered meter with a small on-brand title group — no panel card or button chrome
- Five meter blocks are
<label>elements bound to visually-hidden native radio inputs (0.2–1.0) - Checked blocks fill with the semantic confidence ramp — red (permissive) through amber to the design system's success colour (strict)
- Quiet digit readout — stacked digits use a brief opacity crossfade with no spatial movement
- Digit color matches the gradient stop of the highest lit block
- Drag anywhere across the meter to select the block under the pointer; touch drag supported
- Block fills sweep the colour ramp with a smooth 0.35s eased transition (no stagger, no spatial motion); scrubbing switches to immediate 1:1 tracking via an
is-scrubbingclass - Hover and press feedback use color and an inset outline instead of movement
- Permissive → Strict hint labels anchor the scale ends
- Native radio keyboard semantics — arrow keys move the threshold, group is focusable
- Focus-visible ring outlines the whole meter when radios are keyboard-focused
- Dark and light themes flip the gradient (pink→blue light, violet→teal dark)
- Responsive layout that adapts down to 320px
- Fully respects
prefers-reduced-motion
Accessibility
- Radio group semantics
role="radiogroup"with anaria-labelwraps five native radio inputs- Option labels
- Every radio carries an explicit
aria-label("0.6 — Medium") announcing value and meaning - Keyboard navigation
- Native radio arrow-key behavior moves the threshold in both directions
- Focus indicators
:focus-visibleoutlines the whole meter when a radio is keyboard-focused, plus the global ring- Redundant visuals hidden
- Digit readout and hint row are
aria-hidden— the value is announced by the radio labels - Hidden inputs stay focusable
- Radios use the sr-only clip pattern, not
display: none, so they keep focus and key events - Reduced motion
prefers-reduced-motion: reducecollapses all transitions
Customise it with AI
Open Confidence Meter in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input 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
Tone Pad
VanillaReact
A token-driven 2D tone XY pad — a heatmap-tinted Formal–Casual by Concise–Verbose plane with a springy gradient dot driven by pointer-captured drag and arrow keys, a live tabular readout, crosshair guides, localStorage persistence, and a `getTone`/`setTone` API — themed by AI Steppers.
#input#slider
Temperature Range
VanillaReact
A bare token-driven five-stop temperature slider from 0.0 Precise to 1.0 Creative with a gradient fill, snapping draggable thumb, clickable stops, and a rolling gradient digit readout — themed by the AI Steppers design system in both light and dark.
#input#slider#range
Mode Radio
VanillaReact
A bare token-driven response-mode radiogroup — Balanced, Precise, Creative — with gradient-ringed dots that fill with the brand two-color gradient when checked, native arrow-key radio semantics, and a polite live announcement of the chosen mode — themed by the AI Steppers design system.
#input#radio#form
Date Picker
ReactVanilla
A transit-timetable date picker with full keyboard grid navigation, typed-date entry with inline validation, min and max bounds, disabled-day skipping, and a labelled, live-announced month heading — token-driven and design-system agnostic.
#input#keyboard
Color Picker
ReactVanilla
An iOS-style color picker with grid, spectrum, and RGB slider tabs, an opacity control, a hex input with alpha, and saved swatches — fully token-driven and design-system agnostic.
#input
Feature Toggles
ReactVanilla
A bare token-driven group of four AI feature switches — Streaming, Memory, JSON mode, and Tool use — with design-system accent tracks, sliding thumbs, live screen-reader announcements, and clickable row labels in both light and dark.
#input#toggle#switch
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
