feat: add visual range slider to TrimControl for better UX

[rahul616sama]

Description

Added a visual dual-handle range slider to the TrimControl component so users can drag to set start/end times instead of typing manually.

Related Issue

Closes #537
Closes #666
Closes #660
Closes #803

Changes Made

• Added draggable start and end handles on a timeline
• Highlighted range shown between the two handles
• Timestamp labels showing 0s to full duration
• Number inputs still work and stay in sync with the slider

[vercel]

@rahul616sama is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @rahul616sama!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @rahul616sama

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[rahul616sama]

This PR also includes the custom rotation slider feature.

[rahul616sama]

This PR also includes the custom rotation slider feature.
Closes #588

[magic-peach]

Hey @rahul616sama! This PR has package-lock.json committed (7k+ lines) — this project uses bun.lock exclusively. Please remove it:

rm package-lock.json
git add package-lock.json
git commit -m "chore: remove package-lock.json"
git push

Once removed and CI passes, the RotateControl and TrimControl changes will be reviewed. Thanks!

[magic-peach]

Hey @rahul616sama! The CI build failed for this PR with an accessibility lint error:

./src/components/RotateControl.tsx
60:11  Error: A form label must be associated with a control.  jsx-a11y/label-has-associated-control

This means a <label> element in your RotateControl changes is not properly associated with its input. Fix this by either:

1. Using htmlFor on the label that matches the id of the input
2. Wrapping the input inside the <label> element

For example:

<label htmlFor="rotate-slider">Rotation</label>
<input id="rotate-slider" type="range" ... />

Fix this and push again to re-run CI.

[magic-peach]

Hey @rahul616sama! The visual range slider for TrimControl is a good UX improvement. This PR has:

1. Merge conflicts with main
2. Build is failing

Please rebase and fix build errors.

[magic-peach]

Hey @rahul616sama! The build check is failing on this PR. Please fix the build errors and push again. Check the CI run for specific error details.

[rahul616sama]

Hey @magic-peach I've addressed all the feedback:

• Removed package-lock.json
• Fixed accessibility lint error in RotateControl.tsx — added htmlFor to the label and id to the range input
• Resolved merge conflicts in RotateControl.tsx and TrimControl.tsx
• Rebased onto main

Ready for review! 🙏

[magic-peach]

Hey @rahul616sama! This PR looks good in terms of code structure, but the build/lint/typecheck CI hasn't run yet. Please rebase onto the latest main to trigger fresh checks:

git fetch upstream
git rebase upstream/main
git push --force-with-lease

Once CI passes, we'll review and merge!

[rahul616sama]

Hey @magic-peach Done — rebased onto the latest main and force-pushed. CI should trigger now. Let me know if anything else is needed

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
reframe	Error		May 18, 2026 11:47am

[magic-peach]

@rahul616sama almost all tests are failing please fix them

[rahul616sama]

Hey @magic-peach On it — running the tests locally to identify and fix the failures. Will push a fix shortly!

[rahul616sama]

Hey @magic-peach Fixed the merge conflict in TrimControl.tsx and pushed ✅. All tests passing locally. Could you approve the workflows when you get a chance? 🙏

[magic-peach]

Hey @rahul616sama! 👋

We've added a new requirement for all PRs: a screen recording showing your changes working on your local machine must be attached before a PR can be merged.

Please add a recording to this PR that shows:

1. bun run dev running at http://localhost:3000
2. The full working flow of your change (demonstrate the feature/fix end-to-end)
3. Any tests passing — if your change touches logic with tests, show bun run lint and bunx tsc --noEmit completing without errors in the terminal

How to record:

• macOS: Cmd + Shift + 5 → Record Selected Portion, or QuickTime Player
• Windows: Win + G → Xbox Game Bar → Capture
• Linux: OBS Studio, GNOME Screenshot, or kazam
• Any OS: Loom (free, easy to share)

Once you have the recording, drag the file directly into a comment on this PR, or paste a Loom link. This is now a hard requirement — see CONTRIBUTING.md for full details.

Thanks for contributing to Reframe! 🎬

[rahul616sama]

Hey @magic-peach ..Ready for review! 🙏

[rahul616sama]

For #660

Uploading Editing_ Editing_ WhatsApp Video 2026-05-17 at 12.43.59 PM.mp4 _ Reframe - Brave 2026-05-19 11-27-40.mp4 _ Reframe - Brave 2026-05-20 10-20-15.mp4…

[rahul616sama]

Hey @magic-peach Updated the PR to also close #660 — added a BeforeAfterSlider component that appears on the video preview whenever brightness, contrast, or saturation is adjusted. Screen recording attached showing it working. Ready for review

[rahul616sama]

Also closes #803

Editing_.Editing_.Editing_.WhatsApp.Video.2026-05-17.at.12.43.59.PM.mp4._.Reframe.-.Brave.2026-05-19.11-27-40.mp4._.Reframe.-.Brave.2026-05-20.10-20-15.mp4._.Reframe.-.Brave.2026-05-21.11-10-19.mp4

[rahul616sama]

Hey @magic-peach ..Ready for review! 🙏

[rahul616sama]

Hey @magic-peach All 53 tests passing , conflicts resolved, screen recordings added. Could you approve the workflows when you get a chance? Ready for review! 🙏

[magic-peach]

Hey @rahul616sama! A visual range slider for TrimControl is a great UX improvement. However, this PR has merge conflicts with main — and note that a similar visual range slider was just merged via PR #702. Please check if there's overlap with what was merged.

If your implementation has meaningful differences, please rebase:

git fetch origin
git rebase origin/main
# resolve any conflicts
git push --force-with-lease

Once rebased and CI passes, we'll compare and decide if there are additional improvements to bring in. Thanks!

[rahul616sama]

Hey @magic-peach I checked PR #702 , you're right, the TrimControl visual range slider overlaps. I've kept their implementation in my rebase.

However, my PR still adds these unique features not in #702:

BeforeAfterSlider — live before/after comparison for brightness/contrast/saturation
Custom rotation slider — -180° to 180° with degree input
Sticky right panel — adjustments panel stays visible alongside video
Fixed exportEstimate tests — added missing vitest imports

Would it make sense to keep this PR for just those additional features? Happy to clean it up if needed 🙏

[magic-peach]

@rahul616sama Thank you for working on this! As noted in the comments, there's overlap with PR #702 (which already merged a visual TrimControl range slider). The unique features you mentioned (BeforeAfterSlider, BeforeAfterControl) could be valuable additions — however there are a couple of issues:

1. PR from your main branch
This PR is opened from your fork's main branch. Please create a feature branch for any additional unique features you want to contribute:

git checkout -b feat/before-after-slider
git push origin feat/before-after-slider

2. Duplicate difficulty labels
Labels have been fixed (keeping level:intermediate).

If the TrimControl slider is already merged via #702, please open a separate focused PR for the unique BeforeAfterSlider/BeforeAfterControl features. Thank you!