feat(react): add time slider component

[mihar-22]

Ref #267
Stacks on #644

Summary

Time slider component — connects Slider.* primitives to the media store for seeking.

API

<TimeSlider.Root>
  <TimeSlider.Track>
    <TimeSlider.Buffer />
    <TimeSlider.Fill />
  </TimeSlider.Track>
  <TimeSlider.Thumb />
  <TimeSlider.Value />
</TimeSlider.Root>

Root props — commitThrottle (trailing-edge ms for seek during drag, default 100), label, step, largeStep, disabled, thumbAlignment, onDragStart, onDragEnd.

Parts (Track, Fill, Buffer, Thumb, Value) are re-exports of generic Slider.* — only Root is domain-specific.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
vjs-10-demo-react	Ignored	Preview	Feb 28, 2026 9:01am

[Copilot]

Pull request overview

Adds a React TimeSlider compound component that wires the generic slider primitives to the player store for time seeking, exposing a domain-specific TimeSlider.Root and re-exporting the generic slider parts.

Changes:

• Introduces TimeSliderRoot to bind slider interaction to selectTime/selectBuffer and media.seek() (with pending-seek visual hold).
• Adds React tests covering basic rendering, ref forwarding, props spreading, and part composition.
• Exposes TimeSlider from the @videojs/react public API via new barrel exports.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/src/ui/time-slider/time-slider-root.tsx	Implements the domain-specific TimeSlider root that connects slider interaction to media time/buffer state and seeking.
packages/react/src/ui/time-slider/tests/time-slider.test.tsx	Adds component/compound rendering tests for TimeSliderRoot and shared slider parts usage.
packages/react/src/ui/time-slider/index.ts	Adds the TimeSlider namespace export barrel.
packages/react/src/ui/time-slider/index.parts.ts	Re-exports slider parts and maps Root/RootProps to TimeSliderRoot.
packages/react/src/index.ts	Exposes TimeSlider and TimeSliderRootProps from the package entrypoint.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	d4e231f
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69a2aef75e9de70008e77c38
😎 Deploy Preview	https://deploy-preview-647--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📦 Bundle Size Report

Package	Size	Diff		%
@videojs/core	10.21 kB	0 B	░░░░░░░░	0%	✅
@videojs/element	1.60 kB	0 B	░░░░░░░░	0%	✅
@videojs/html	17.27 kB	0 B	░░░░░░░░	0%	✅
@videojs/icons	3.79 kB	0 B	░░░░░░░░	0%	✅
@videojs/react	14.84 kB	+628 B	████████	+4.3%	🔺
@videojs/store	1.95 kB	0 B	░░░░░░░░	0%	✅
@videojs/utils	2.81 kB	0 B	░░░░░░░░	0%	✅

Total: 52.47 kB · +628 B · +1.2%

---

Entry Breakdown

Subpath sizes are the additional bytes on top of the root entry point, measured by bundling root + subpath together and subtracting the root-only size.

@videojs/core

Entry	Base	PR	Diff	%
.	4.21 kB	4.21 kB	0 B	0%	✅
./dom	6.01 kB	6.01 kB	0 B	0%	✅
total	10.21 kB	10.21 kB	0 B	0%

@videojs/element

Entry	Base	PR	Diff	%
.	817 B	817 B	0 B	0%	✅
./context	823 B	823 B	0 B	0%	✅
total	1.60 kB	1.60 kB	0 B	0%

@videojs/html

Entry	Base	PR	Diff	%
.	14.07 kB	14.07 kB	0 B	0%	✅
./video	1.08 kB	1.08 kB	0 B	0%	✅
./audio	1.07 kB	1.07 kB	0 B	0%	✅
./background	1.05 kB	1.05 kB	0 B	0%	✅
total	17.27 kB	17.27 kB	0 B	0%

@videojs/icons

Entry	Base	PR	Diff	%
./react	2.27 kB	2.27 kB	0 B	0%	✅
./html	1.52 kB	1.52 kB	0 B	0%	✅
total	3.79 kB	3.79 kB	0 B	0%

@videojs/store

Entry	Base	PR	Diff	%
.	1.29 kB	1.29 kB	0 B	0%	✅
./html	468 B	468 B	0 B	0%	✅
./react	204 B	204 B	0 B	0%	✅
total	1.95 kB	1.95 kB	0 B	0%

@videojs/utils

Entry	Base	PR	Diff	%
./array	104 B	104 B	0 B	0%	✅
./dom	928 B	928 B	0 B	0%	✅
./events	227 B	227 B	0 B	0%	✅
./function	261 B	261 B	0 B	0%	✅
./object	119 B	119 B	0 B	0%	✅
./predicate	265 B	265 B	0 B	0%	✅
./string	148 B	148 B	0 B	0%	✅
./style	185 B	185 B	0 B	0%	✅
./time	478 B	478 B	0 B	0%	✅
./number	158 B	158 B	0 B	0%	✅
total	2.81 kB	2.81 kB	0 B	0%

---

ℹ️ How to interpret

Sizes are minified + brotli, measured with esbuild.
Package totals are computed as root size + marginal subpath costs.
Subpath marginal cost = (root + subpath bundled together) − root alone.

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.