║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Scrub Bar description: A component for scrubbing through a timeline, typically used for audio or video playback. component: true

<ComponentPreview name="scrub-bar-demo" description="An interactive timeline scrubber." />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx @elevenlabs/cli@latest components add scrub-bar

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="scrub-bar" title="components/ui/scrub-bar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

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. |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║