Video Slider — VisualSandbox UI

Video and audio player with an animated elastic scrubber - drag-to-seek with pointer capture, hover time preview, spring playhead, edge stretch, fullscreen, and an optional waveform surface for audio.

In the preview: hover the rail (it grows), drag to scrub, drag past either end for the elastic stretch, click anywhere on the rail and watch the playhead spring there. Demo clip: Big Buck Bunny © Blender Foundation, CC-BY 3.0.

Install

npx shadcn@latest add @visualsandbox-ui/video-slider

Requires the one-time registry entry from Installation — or use the full URL with zero setup:

npx shadcn@latest add https://ui.visualsandbox.com/r/video-slider.json

Pulls @wavesurfer/react + wavesurfer.js for the audio waveform surface.

Usage

import VideoSlider, { AudioSlider } from "@/components/visualsandbox-ui/video-slider";

// Video: custom player chrome + the scrubber under the frame
<VideoSlider src="/clip.mp4" aspectHint={16 / 9} />

// Audio: compact cover surface, optional live waveform bound to the same element
<AudioSlider src="/track.mp3" waveform />

Scrubber mechanics

Drag-to-seek uses pointer capture — the drag keeps tracking outside the rail, with a global release safety net for off-window drops.
Clicks spring the playhead to position rather than jumping; playback progress catches up on a linear tween.
Hover preview shows the target time and tints the span between the playhead and the cursor — in both directions.
Elastic edges: dragging past either end stretches the whole rail (scaleX around the near edge) and the thumb rides the deform. Disable with stretchEffect={false}.
Seek safety: only seeks inside the media's seekable ranges — sources served without HTTP range support would otherwise restart from byte 0.
Duration fix-up: streamed files that report duration: Infinity get nudged once to force the browser to compute the real length.
Load resilience: transient CDN errors retry twice with backoff before showing a tap-to-retry state.

Props

Prop	Type	Default	Notes
`src`	`string`	—
`poster`	`string`	—	Video poster, or cover art for the audio surface.
`autoPlay`	`boolean`	`false`
`loop`	`boolean`	`false`
`muted`	`boolean`	`false`
`stretchEffect`	`boolean`	`true`	Elastic rail deformation past the ends.
`aspectHint`	`number`	—	Reserves the box (w/h) before metadata arrives — no layout jump.
`onNaturalSize`	`(w, h) => void`	—	Reports intrinsic pixel size once metadata loads.
`waveform`	`boolean`	`false`	`AudioSlider` only: wavesurfer visualization, click-seekable.
`className`	`string`	—