Fix: Added second handle to Budget Range slider for proper range selection

[Pooja675]

Closes #123

📝 Description

This PR resolves the issue in the Sponsorship Matchmaking dashboard where the Budget Range slider displayed only a single handle, preventing users from selecting both minimum and maximum budget values.

The slider component has now been updated to include two round handles — one for the minimum value and one for the maximum value — allowing accurate range selection and better user control.

🔧 Changes Made

• Updated Slider component configuration in the Filters → Budget Range section.
• Replaced single-value slider with range-based slider (defaultValue={[min, max]}).
• Added state management using useState to dynamically track range updates.
• Ensured UI consistency with existing styles using Tailwind CSS.
• Verified that both handles appear correctly and function independently.

📷 Screenshots or Visual Changes (if applicable)

Before

After

Inpact.mp4

How to Test:

1. Go to Dashboard → Sponsorships → Filters → Budget Range.
2. Verify that two circular handles (left = min, right = max) are visible.
3. Drag both handles and confirm that:
   • Both values update dynamically.
   • Range selection works correctly.
   • Styling remains consistent with other UI components.

✅ Checklist

• I have read the contributing guidelines.
• I have added tests that prove my fix is effective or that my feature works.
• I have added necessary documentation (if applicable).
• Any dependent changes have been merged and published in downstream modules.

Additional Notes:

This update enhances user experience in the sponsorship filtering process by enabling precise budget range selection, aligning with expected modern dashboard functionality.

Summary by CodeRabbit

• Refactor

  • Improved internal state management and interactivity of the slider component on the sponsorships page.

• Style

  • Refined UI text, labels, and component formatting for improved visual consistency.

[coderabbitai]

Walkthrough

The Sponsorships page now includes state management for a budget range slider, tracking values between 1000 and 10000. The Slider component is wired as a controlled component via value and onValueChange props, enabling dual-handle functionality for both minimum and maximum budget selection.

Changes

Cohort / File(s)	Summary
Budget Range Slider State Management Frontend/src/pages/Sponsorships.tsx	Added useState hook to manage range state [1000, 10000]; converted Slider to controlled component with value and onValueChange props; updated imports; refined JSX formatting and UI strings across component blocks

Sequence Diagram

sequenceDiagram
    participant User
    participant SponsorshipsPage as Sponsorships Page<br/>(with useState)
    participant Slider

    User->>Slider: Drags handle (min/max)
    Slider->>SponsorshipsPage: Triggers onValueChange
    SponsorshipsPage->>SponsorshipsPage: Updates range state
    SponsorshipsPage->>Slider: Passes updated value prop
    Slider->>Slider: Re-renders both handles
    Slider->>User: Displays updated range

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single file modified with straightforward state management addition
• Controlled component pattern is standard and repetitive
• Majority of changes are formatting and JSX refinements
• No complex logic or behavioral modifications

Poem

🐰 A slider once silent, now speaks with two hands,
Both min and max dancing across the demands,
The range now flows free, no more hidden in shade,
Budget filtering blooms—what a grand upgrade! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "Fix: Added second handle to Budget Range slider for proper range selection" clearly and concisely describes the main change: implementing a dual-handle slider for the Budget Range component. The title is fully related to the changeset, accurately reflecting the addition of useState state management and wiring the Slider component to support range selection with both minimum and maximum value handles. The phrasing is specific and directly addresses the core objective from the linked issue without unnecessary noise.
Linked Issues Check	✅ Passed	The code changes directly address the primary objectives from linked issue #123: implementing a dual-handle range slider for the Budget Range filter [#123]. The PR adds useState state management with range values [1000, 10000] and wires the Slider component with value and onValueChange props to enable both minimum and maximum value selection, which restores the missing second handle functionality [#123]. UI/UX consistency is maintained through refined component prop formatting and Tailwind CSS styling alignment [#123]. The changes align with the coding requirements to enable users to select both min and max budget values and achieve visual consistency with other filter components [#123].
Out of Scope Changes Check	✅ Passed	All changes in the PR are directly scoped to fixing the Budget Range slider issue described in #123. The useState import addition and state management setup are necessary for the dual-handle slider implementation. UI formatting adjustments to CardDescription, Label, TabsTrigger, Avatar subcomponents, and line break refinements are consistent with the objective to maintain UI/UX consistency across filter components. No unrelated functionality modifications or feature additions outside the scope of restoring the dual-handle slider capability are present in the changeset.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

Frontend/src/pages/Sponsorships.tsx (1)

1-1: LGTM! State management correctly added for dual-handle slider.

The useState import and initialization properly enable controlled range selection. The initial range [1000, 10000] provides sensible defaults within the slider's 0-20000 bounds.

Optional TypeScript refinement:

For stronger type safety, consider annotating the state with a tuple type:

-  const [range, setRange] = useState([1000, 10000])
+  const [range, setRange] = useState<[number, number]>([1000, 10000])

This ensures the range is always a two-element tuple rather than a generic number array.

Also applies to: 44-44

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a3be437 and 945a64c.

📒 Files selected for processing (1)

• Frontend/src/pages/Sponsorships.tsx (11 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

Frontend/src/pages/Sponsorships.tsx (8)

Frontend/src/components/ui/card.tsx (5)

• CardDescription (84-84)
• CardHeader (81-81)
• CardContent (85-85)
• Card (80-80)
• CardTitle (83-83)

Frontend/src/components/ui/label.tsx (1)

• Label (25-25)

Frontend/src/components/ui/slider.tsx (1)

• Slider (24-24)

Frontend/src/components/ui/select.tsx (3)

• SelectItem (156-156)
• SelectContent (154-154)
• Select (150-150)

Frontend/src/components/ui/button.tsx (1)

• Button (54-54)

Frontend/src/components/ui/tabs.tsx (4)

• Tabs (52-52)
• TabsList (52-52)
• TabsTrigger (52-52)
• TabsContent (52-52)

Frontend/src/components/ui/avatar.tsx (3)

• Avatar (50-50)
• AvatarImage (50-50)
• AvatarFallback (50-50)

Frontend/src/components/ui/badge.tsx (1)

• Badge (36-36)

🔇 Additional comments (2)

Frontend/src/pages/Sponsorships.tsx (2)

152-159: Excellent fix! Slider now operates as a controlled range component.

By wiring value={range} and onValueChange={(value) => setRange(value)}, the Slider correctly renders dual handles for independent min/max selection. This directly resolves issue #123 where only a single handle was visible. The min/max/step configuration is appropriate for budget filtering.

---

162-168: LGTM! Range values display correctly with proper formatting.

The display reads range[0] and range[1] to show the current min/max budget values. Using toLocaleString() ensures numbers render with thousand separators (e.g., "$1,000" instead of "$1000"), improving readability.