Components

Slider

A native range input with a glowing thumb and any track you like, at full size or small.

Save each month30%

Import

import { Slider } from '@rinzai/zen';

Examples

Small

size="sm": a thin track and a small thumb, for a compact control like a player's volume. Still 20px tall to grab.

Hue

A custom track (every hue) and thumb (the chosen colour); onValueCommit fires once, when you let go.

Saved: 295°

API reference

<Slider>

A range slider on the native <input type="range"> (keyboard, forms and screen readers work as usual): a rounded track, filled up to the value in the accent unless you give it your own trackBackground (e.g. a hue gradient), and a glowing thumb.

Prop	Type	Default
`defaultValue` The first value, when the slider keeps its own (default `min`).	`number`	`—`
`max`	`number`	`100`
`min`	`number`	`0`
`onValueChange` While dragging (every step).	`((value: number) => void)`	`—`
`onValueCommit` Once the user lets go: the moment to save.	`((value: number) => void)`	`—`
`size` `'sm'`: a thin track and a small thumb, for a compact control such as a volume slider.	`"md" \| "sm"`	`md`
`step` `'any'` for no snapping; the arrow keys then move by the browser's own amount.	`"any" \| number`	`1`
`thumbColor` CSS colour for the thumb (default: the accent).	`string`	`—`
`trackBackground` CSS background for the track, e.g. a gradient of hues.	`string`	`—`
`value` The value, when you keep it.	`number`	`—`
`valueText` Spoken value, e.g. (v) => `Hue ${v} degrees`.	`((value: number) => string)`	`—`