Build TimeRangePicker component for scheduling content

[Akatenvictor]

What

Create a time range picker component for selecting start and end times, useful for clip creation and content scheduling features.

Why

Future features like audio clip creation and scheduled releases need a way to select time ranges. Building the component now prepares for these features.

Scope

In: Dual-thumb range slider, time display in MM:SS format, keyboard input, validation for min/max range
Out: Calendar date picker, timezone handling

Acceptance Criteria

• Two draggable thumbs on a timeline track
• Time display shows start and end in MM:SS or HH:MM:SS format
• Thumbs cannot cross each other
• Keyboard: Tab between thumbs, arrow keys to adjust by 1 second
• Minimum range enforced (e.g. 5 seconds minimum clip length)
• ARIA slider semantics for both thumbs

Technical Context

• New components/ui/TimeRangePicker.tsx
• Can extend or replace existing scrubber patterns
• Props: duration, startTime, endTime, onChange

[kris-nana]

@kris-nana has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi Maintainer, I'd like to work on this issue. Please assign this to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kris-nana to this issue.

[Buchi-Einstein]

@Buchi-Einstein has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

can i work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Buchi-Einstein to this issue.

[drips-wave]

Congratulations, @Buchi-Einstein! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Buchi-Einstein: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been marked as completed by a Drips Wave moderator for @Buchi-Einstein as part of the Stellar Wave Program's 7th Wave 🥳

Moderator's reason: [Auto-assessed] The PR provides a comprehensive implementation of the TimeRangePicker component, addressing all acceptance criteria including dual-thumb logic, keyboard navigation, and ARIA semantics. Since being opened 8 days ago, there have been no maintainer responses or objections, and the current CI failures (Vercel authorization and GitHub Actions approval) are non-actionable for the contributor.

😎 @Buchi-Einstein: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.