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.
Example
tsx
import { Slider } from '@kidcash/ui';
<Slider variant="success" min={0} max={100} value={61} onChange={setValue} />Try it live
← Back to the playground to see Slider rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.