A headless library with 45+ accessible components. Bring your own styles and build a design system that works optimally in Ripple TS.
No default styles to fight. Bring your own CSS — Panda, Tailwind, CSS-in-JS, or plain stylesheets.
The same API used here powers its sister libraries for React, Solid, Vue, and Svelte.
WAI-ARIA patterns baked in. Keyboard navigation and screen reader support out of the box.
Predictable behavior you can rely on. Complex interactions handled with edge cases covered.
import { Slider } from 'ark-ripple/slider';
import { track } from 'ripple';
export component Basic() {
const value = track([30]);
<Slider.Root
min={-50}
max={50}
{value}
onValueChange={(e) => (@value = e.value)}
>
<Slider.Label>{'Label'}</Slider.Label>
<Slider.ValueText>{@value}</Slider.ValueText>
<Slider.Control>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb index={0} />
</Slider.Control>
</Slider.Root>
}