Component
Progress
Timeline scrub bar with hover tooltip, buffer indicator, and drag-to-seek.
Features
✓Hover tooltip showing time at cursor position
✓Click to seek to any position
✓Drag to scrub through video
✓Buffer progress indicator
✓Smooth scrubber dot that appears on hover
✓ARIA slider accessibility attributes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| currentTime* | number | — | Current playback position in seconds. |
| duration* | number | — | Total video duration in seconds. |
| loadedFraction* | number | — | Buffer progress from 0 to 1. |
| onSeek* | (seconds: number) => void | — | Called with the target position in seconds when the user seeks. |
currentTime*
number
Current playback position in seconds.
duration*
number
Total video duration in seconds.
loadedFraction*
number
Buffer progress from 0 to 1.
onSeek*
(seconds: number) => void
Called with the target position in seconds when the user seeks.
Implementation notes
Drag behavior
Drag-to-seek uses global
window mousemove/mouseup listeners so dragging outside the component still works. Listeners are cleaned up immediately on mouseup. The scrubber position updates in real-time during drag without triggering actual seeks until the user releases the mouse button.