Skip to content

fix(core): clamp Slider controlled values#4062

Open
Kevinjohn wants to merge 1 commit into
facebook:mainfrom
Kevinjohn:fix/slider-clamp-controlled-value
Open

fix(core): clamp Slider controlled values#4062
Kevinjohn wants to merge 1 commit into
facebook:mainfrom
Kevinjohn:fix/slider-clamp-controlled-value

Conversation

@Kevinjohn

@Kevinjohn Kevinjohn commented Jul 18, 2026

Copy link
Copy Markdown

A controlled Slider no longer renders its thumb or ARIA value outside the declared bounds.

Fixes #4061.

  • Expected: value={150} with min={0} and max={100} renders at 100% and exposes aria-valuenow="100".
  • Before: the thumb rendered at 150% with aria-valuenow="150".
  • After: the controlled value is normalized once for thumb position, filled-track position, display text, and ARIA output.

Actual screenshots

Both captures use the same 300px-wide Storybook reproduction. The 0 and 100 marks make the declared range boundary visible.

Before — 2e2e96046 (origin/main): the 150 value and thumb render well beyond the 100 maximum marker.

Slider thumb and value 150 rendered beyond the visible 100 maximum marker

After — 277414e3a, same story, args, width, and marks: the thumb and displayed value land directly on 100.

Slider thumb and value clamped directly to the visible 100 maximum marker

Test plan

  • pnpm vitest run packages/core/src/Slider/Slider.test.tsx — 34 passed
  • pnpm vitest run --project ui — 4,853 passed
  • pnpm --filter @astryxdesign/core typecheck
  • pnpm --filter @astryxdesign/core build
  • Targeted ESLint and changeset validation

@vercel

vercel Bot commented Jul 18, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
astryx Ready Ready Preview, Comment Jul 18, 2026 7:49pm

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Jul 18, 2026
@github-actions github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge labels Jul 18, 2026
@Kevinjohn

Copy link
Copy Markdown
Author
slider-controlled-value-marked-before slider-controlled-value-marked-after

(wrong screenshots were uploaded - they were test results rather than visual demo)

@Kevinjohn
Kevinjohn marked this pull request as ready for review July 18, 2026 20:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot. community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Slider controlled values can render outside the track bounds

1 participant