Components

Slider

A native range input with a glowing thumb and any track you like.

Save each month30%

Import

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

Examples

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
`value`Required	`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)`	`—`
`step`	`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`	`—`
`valueText` Spoken value, e.g. (v) => `Hue ${v} degrees`.	`((value: number) => string)`	`—`