Components

Seek Bar

Where playback is in a track, and the way to move it: played and loaded on one track, the time played and the length beside it or under its ends.

0:00

Import

import { SeekBar, formatDuration } from '@rinzai/zen';

Examples

Times below

The times under the bar's ends, as on a phone's Now Playing screen.

0:00

API reference

<SeekBar>

Where playback is in a track, and the way to move it: filled up to the current time, shaded on to what's loaded, between the time played and the length. While playing it glides, run by the browser's compositor between the player's time updates. While dragging, the time follows the thumb and the track keeps playing; letting go seeks. The arrow keys seek 5 seconds.

Prop	Type	Default
`currentTime`Required Seconds played.	`number`	`—`
`duration`Required Seconds long; 0 while unknown (the bar is disabled).	`number`	`—`
`onSeek`Required When the user lets go, or steps with the keys: the time to play from.	`(time: number) => void`	`—`
`buffered` Seconds loaded, shaded on the track past the time played.	`number`	`0`
`playbackRate` How fast it moves on while playing (default 1).	`number`	`1`
`playing` While the time is running (playing, not waiting for data): the bar glides on between time updates.	`boolean`	`false`
`thumbColor` CSS colour for the thumb (default: the accent).	`string`	`—`
`times` Where the time played and the length go: either side of the bar (default), or under its ends, as on a phone's Now Playing screen.	`"below" \| "beside"`	`beside`
`valueText` Spoken value, e.g. (v) => `Hue ${v} degrees`.	`((value: number) => string)`	`—`