0:301:40
<script setup lang="ts">
import {
ScrubBar,
ScrubBarProgress,
ScrubBarThumb,
ScrubBarTimeLabel,
ScrubBarTrack,
} from '@/components/elevenlabs-ui/scrub-bar'
import { ref } from 'vue'
const value = ref(30)
const isScrubbing = ref(false)
const duration = 100
function handleScrub(val: number) {
value.value = val
}
</script>
<template>
<div class="flex w-full max-w-sm flex-col items-center gap-4 p-4">
<ScrubBar
:duration="duration"
:value="value"
class="w-full"
@scrub="handleScrub"
@scrub-start="isScrubbing = true"
@scrub-end="isScrubbing = false"
>
<ScrubBarTimeLabel :time="value" class="w-10 text-center" />
<ScrubBarTrack class="mx-2">
<ScrubBarProgress />
<ScrubBarThumb
class="bg-primary"
:data-scrubbing="isScrubbing"
/>
</ScrubBarTrack>
<ScrubBarTimeLabel :time="duration" class="w-10 text-center" />
</ScrubBar>
</div>
</template>Installation
pnpm dlx elevenlabs-ui-vue@latest add scrub-bar
Usage
<script setup lang="ts">
import { ref } from 'vue'
import {
ScrubBar,
ScrubBarProgress,
ScrubBarThumb,
ScrubBarTimeLabel,
ScrubBarTrack,
} from "@/components/elevenlabs-ui/scrub-bar"
const value = ref(30)
const duration = 100
</script>
<template>
<ScrubBar
:duration="duration"
:value="value"
@scrub="(val: number) => value = val"
>
<ScrubBarTimeLabel :time="value" />
<ScrubBarTrack class="mx-2">
<ScrubBarProgress />
<ScrubBarThumb />
</ScrubBarTrack>
<ScrubBarTimeLabel :time="duration" />
</ScrubBar>
</template>API Reference
ScrubBar
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. |
Emits
| Event | Type | Description |
|---|---|---|
| scrub | (time: number) => void | Optional. Callback when the user scrubs the timeline. |
| scrub-start | () => void | Optional. Callback when the user starts scrubbing. |
| scrub-end | () => 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 HTMLAttributes 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. |