Scrubber

Copy
import { Timeline } from "@audio-ui/react";

<Timeline.Root>
  <Timeline.Ruler>
    <Timeline.Playhead /> {/* the fill */}
    <Timeline.Playhead /> {/* the thumb */}
  </Timeline.Ruler>
</Timeline.Root>

Copy
import { createSource } from "@audio-ui/react";
import { Scrubber } from "@/components/audio-ui/scrubber";

const position = createSource(0); // seconds; set it from your player's clock

<Scrubber
  duration={215}
  onPlayingChange={(playing) => (playing ? player.play() : player.pause())}
  onSeek={(seconds) => player.seek(seconds)}
  playing={isPlaying}
  source={position}
/>;