Temperature Range
input#slider#range
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 Temperature Range
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.
Features
- Bare centered slider with a small on-brand title group — no panel card or extra chrome
- Five hidden radio inputs drive the whole slider state with pure CSS
:has()selectors - Gradient fill bar grows to the selected stop via
transform: scaleX()— no layout animation - Draggable thumb snaps to the nearest of the five stops on mouse or touch drag
- Clickable stop dots jump straight to any temperature value
- Rolling digit readout crossfades and slides between 0.0, 0.3, 0.5, 0.7, and 1.0
- Stops behind the selection light up with an accent ring; the thumb carries a soft glow halo
- Precise and Creative end marks anchor the scale semantics
- Hidden radios keep native keyboard behavior — arrow keys move between stops
- Visually-hidden live region announces "Temperature X" to assistive technology
- Dark mode that flips the gradient (pink→blue light, violet→teal dark)
- Responsive layout that adapts down to 320px
- Fully respects
prefers-reduced-motion
Accessibility
- Slider semantics
role="radiogroup"with five labelled radio inputs, one per stop- Input labels
- Every radio has an explicit
aria-labelwith its value and end-mark meaning - Live readout
- Visually-hidden
role="status"witharia-live="polite"announces "Temperature X" - Keyboard navigation
- Hidden radios keep native arrow-key movement between stops
- Decorative layers
- Fill, thumb, digit readout, and marks are
aria-hidden="true" - Focus indicators
:focus-visibleon a radio paints an accent outline on the thumb- Reduced motion
prefers-reduced-motion: reducedisables all transitions
Customise it with AI
Open Temperature Range 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
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
Text Input
VanillaReact
Token-driven text inputs with a borderless bottom-line style, animated focus underlines, leading icons, password visibility toggles, live per-field validation, dark mode, and a responsive two-column layout.
#input#password#validation
Floating Field
VanillaReact
A bare token-driven text input with a floating "Agent Name" label that rests inside the field and rises above it on focus or when filled, a design-system focus border, and readable accent label text in light and dark.
#input
Capability Checks
VanillaReact
A bare token-driven capability checkbox group — three label-wrapped custom checks whose boxes fill with the brand two-color gradient and pop in a springy check mark when selected, announcing a live selected count — themed by the AI Steppers design system in both light and dark.
#input#checkbox#form
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
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
