Skip to content

feat(react): add slider preview component#710

Merged
mihar-22 merged 4 commits intomainfrom
feat/slider-preview
Mar 5, 2026
Merged

feat(react): add slider preview component#710
mihar-22 merged 4 commits intomainfrom
feat/slider-preview

Conversation

@mihar-22
Copy link
Copy Markdown
Member

@mihar-22 mihar-22 commented Mar 4, 2026

Closes #658

Summary

Add Slider.Preview — a positioning container that tracks the pointer along the slider for preview content (time values, thumbnails, chapter titles).

Changes

  • CSS-only positioning with min(max(...)) clamping via ResizeObserver
  • noClamp prop for previews extending beyond slider bounds
  • Re-exported as Slider.Preview, TimeSlider.Preview, VolumeSlider.Preview

Testing

pnpm -F @videojs/react test src/ui/slider/tests/slider-preview

Positioning container for preview content that tracks the pointer
along the slider. Uses ResizeObserver for width measurement and CSS
min/max clamping to keep the preview within slider bounds. Supports
noClamp prop for previews that intentionally extend beyond edges.

Refs #658
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 4, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit e8e07c2
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/69a8f8c9f4d61000080b596d
😎 Deploy Preview https://deploy-preview-710--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 4, 2026

📦 Bundle Size Report

Package Size Diff %
@videojs/core 10.49 kB +79 B ████░░░░ +0.7% 🔺
@videojs/element 1.60 kB 0 B ░░░░░░░░ 0%
@videojs/html 27.68 kB +107 B ██░░░░░░ +0.4% 🔺
@videojs/icons 7.49 kB 0 B ░░░░░░░░ 0%
@videojs/react 15.37 kB +232 B ████████ +1.5% 🔺
@videojs/store 1.96 kB 0 B ░░░░░░░░ 0%
@videojs/utils 2.81 kB 0 B ░░░░░░░░ 0%

Total: 67.40 kB · +418 B · +0.6%


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.40 kB 4.40 kB 0 B 0%
./dom 6.02 kB 6.10 kB +79 B +1.3% 🔺
total 10.42 kB 10.49 kB +79 B +0.7%
@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 %
. 15.51 kB 15.59 kB +89 B +0.6% 🔺
./video 9.74 kB 9.70 kB -39 B -0.4% 🔽
./audio 1.34 kB 1.35 kB +11 B +0.8% 🔺
./background 1012 B 1.03 kB +46 B +4.5% 🔺
total 27.57 kB 27.68 kB +107 B +0.4%
@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%
./render 1.59 kB 1.59 kB 0 B 0%
./element 2.11 kB 2.11 kB 0 B 0%
total 7.49 kB 7.49 kB 0 B 0%
@videojs/store
Entry Base PR Diff %
. 1.31 kB 1.31 kB 0 B 0%
./html 472 B 472 B 0 B 0%
./react 199 B 199 B 0 B 0%
total 1.96 kB 1.96 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.

mihar-22 added 3 commits March 4, 2026 13:25
Move SliderPreviewOverflow type and getSliderPreviewStyle() into
@videojs/core/dom alongside getSliderCSSVars(). React component now
imports both from core, eliminating inline positioning logic and
setting up HTML element to share the same source.
@mihar-22 mihar-22 marked this pull request as ready for review March 5, 2026 03:31
@mihar-22 mihar-22 enabled auto-merge (squash) March 5, 2026 03:32
@mihar-22 mihar-22 disabled auto-merge March 5, 2026 03:38
@mihar-22 mihar-22 merged commit db75697 into main Mar 5, 2026
19 checks passed
@mihar-22 mihar-22 deleted the feat/slider-preview branch March 5, 2026 03:38
This was referenced Mar 4, 2026
This was referenced Apr 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI: Slider Preview Component

1 participant