Inputs & feedback
Slider
Glass track, gradient fill, glowing thumb. Three variants: primary (aurora), success (green), flame (red/orange). Drop-in for `<input type=range>` controls.
Slider is the kit's range primitive. Glass track, gradient fill that follows the value, a thumb that glows in the variant's color and scales up under your cursor. Three variants — primary (theme aurora), success (allowance saved), flame (spending) — so the same control reads as the right semantics in different contexts.
Live preview
Weekly allowance$15
Example
tsx
import { Slider } from '@kidcash/ui';
<Slider variant="success" min={0} max={100} value={61} onChange={setValue} />Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use Slider in your own app.