Scrub Bar

A component for scrubbing through a timeline, typically used for audio or video playback.

0:30

1:40

"use client"

import * as React from "react"

import {
  ScrubBarContainer,
  ScrubBarProgress,
  ScrubBarThumb,
  ScrubBarTimeLabel,
  ScrubBarTrack,
} from "@/components/ui/scrub-bar"

const ScrubBarDemo = () => {
  const [value, setValue] = React.useState(30)
  const [isScrubbing, setIsScrubbing] = React.useState(false)
  const duration = 100

  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-4 p-4">
      <ScrubBarContainer
        duration={duration}
        value={value}
        onScrub={setValue}
        onScrubStart={() => setIsScrubbing(true)}
        onScrubEnd={() => setIsScrubbing(false)}
        className="w-full"
      >
        <ScrubBarTimeLabel time={value} className="w-10 text-center" />
        <ScrubBarTrack className="mx-2">
          <ScrubBarProgress />
          <ScrubBarThumb className="bg-primary" data-scrubbing={isScrubbing} />
        </ScrubBarTrack>
        <ScrubBarTimeLabel time={duration} className="w-10 text-center" />
      </ScrubBarContainer>
    </div>
  )
}

export ScrubBarDemo

Installation


pnpm dlx shadcn@latest add https://ui.zgi.ai/r/scrub-bar.json

Usage

import * as React from "react"
 
import {
  ScrubBarContainer,
  ScrubBarProgress,
  ScrubBarThumb,
  ScrubBarTimeLabel,
  ScrubBarTrack,
} from "@/components/ui/scrub-bar"
 
export function ScrubBarExample() {
  const [value, setValue] = React.useState(30)
  const duration = 100
 
  return (
    <ScrubBarContainer duration={duration} value={value} onScrub={setValue}>
      <ScrubBarTimeLabel time={value} />
      <ScrubBarTrack className="mx-2">
        <ScrubBarProgress />
        <ScrubBarThumb />
      </ScrubBarTrack>
      <ScrubBarTimeLabel time={duration} />
    </ScrubBarContainer>
  )
}

API Reference

ScrubBarContainer

The main container for the scrub bar components. It provides the context for its children.

Prop	Type	Description
`duration`	`number`	Required. The total duration of the timeline.
`value`	`number`	Required. The current value of the timeline.
`onScrub`	`(time: number) => void`	Optional. Callback when the user scrubs the timeline.
`onScrubStart`	`() => void`	Optional. Callback when the user starts scrubbing.
`onScrubEnd`	`() => void`	Optional. Callback when the user ends scrubbing.

ScrubBarTrack

The track for the scrub bar. It handles the pointer events for scrubbing.

This component accepts standard HTMLDivElement attributes.

ScrubBarProgress

Displays the progress on the scrub bar track.

This component is a wrapper around the Progress component and accepts its props, except for value.

ScrubBarThumb

The handle for scrubbing.

This component accepts standard HTMLDivElement attributes.

ScrubBarTimeLabel

A label to display time.

Prop	Type	Description
`time`	`number`	Required. The time to display, in seconds.
`format`	`(time: number) => string`	Optional. A function to format the time into a string. Defaults to `m:ss`.

Run Node List Segment Card

On This Page

Installation Usage API Reference ScrubBarContainer ScrubBarTrack ScrubBarProgress ScrubBarThumb ScrubBarTimeLabel

Deploy and Scale Agents with ZGI

ZGI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.