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

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 Here's the screen recording showing the visual range slider working on my local machine (bun run dev)
The recording shows:

App running at localhost:3000
Trim sliders draggable in real-time

Ready for review!

Editing_.WhatsApp.Video.2026-05-17.at.12.43.59.PM.mp4._.Reframe.-.Brave.2026-05-19.11-27-40.mp4

[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