Skip to content

feat(split): make Smart Money Split sliders interactive with live 100…#506

Open
midexol wants to merge 1 commit into
Remitwise-Org:mainfrom
midexol:feat/issue-457-interactive-split-sliders
Open

feat(split): make Smart Money Split sliders interactive with live 100…#506
midexol wants to merge 1 commit into
Remitwise-Org:mainfrom
midexol:feat/issue-457-interactive-split-sliders

Conversation

@midexol

@midexol midexol commented Jun 18, 2026

Copy link
Copy Markdown

Closes #457

  • Convert SplitConfiguration to manage allocation state via useState, initialized from DEFAULT_SPLIT_CONFIG (spending 50, savings 30, bills 15, insurance 5)
  • Remove disabled attribute from all four range sliders; add onChange handler and controlled number input per slider for keyboard access
  • Live total computed inline; validatePercentages() called on every change via useMemo
  • Total card colour-codes green (100%), amber (under), red (over) with aria-live region for screen-reader announcements
  • Inline validation message shown under total when sum != 100
  • Submit button (Save Allocation) disabled and aria-disabled while total != 100 or submission is pending
  • AsyncSubmissionStatus wired to real pending/success/error state; idle copy reflects current validation result
  • Loader2 spinner shown in button during pending state
  • Full keyboard + aria-valuetext accessibility on sliders
  • Add tests/unit/split/split-config.test.ts covering validatePercentages, computeAllocation, DEFAULT_SPLIT_CONFIG, and submit-button gating logic

…% validation

Closes Remitwise-Org#457

- Convert SplitConfiguration to manage allocation state via useState,
  initialized from DEFAULT_SPLIT_CONFIG (spending 50, savings 30,
  bills 15, insurance 5)
- Remove disabled attribute from all four range sliders; add onChange
  handler and controlled number input per slider for keyboard access
- Live total computed inline; validatePercentages() called on every
  change via useMemo
- Total card colour-codes green (100%), amber (under), red (over) with
  aria-live region for screen-reader announcements
- Inline validation message shown under total when sum != 100
- Submit button (Save Allocation) disabled and aria-disabled while
  total != 100 or submission is pending
- AsyncSubmissionStatus wired to real pending/success/error state;
  idle copy reflects current validation result
- Loader2 spinner shown in button during pending state
- Full keyboard + aria-valuetext accessibility on sliders
- Add tests/unit/split/split-config.test.ts covering validatePercentages,
  computeAllocation, DEFAULT_SPLIT_CONFIG, and submit-button gating logic

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.

Make the Smart Money Split sliders interactive with live 100% validation in app/split/page.tsx

1 participant