Skip to content

fix(web): start at 0 when value is 0 and the range includes 0 - #829

Open
huytdps13400 wants to merge 1 commit into
callstack:mainfrom
huytdps13400:fix/web-zero-value-negative-min
Open

huytdps13400 wants to merge 1 commit into
callstack:mainfrom
huytdps13400:fix/web-zero-value-negative-min

Conversation

@huytdps13400

Copy link
Copy Markdown

Summary:

Fixes #828

On web, <Slider minimumValue={-8} maximumValue={8} value={0} /> renders the thumb at the minimum instead of in the middle.

Root cause: RNCSliderNativeComponent.web.tsx seeds its state with initialValue || minimumValue. 0 is falsy, so it falls back to minimumValue. The layout effect never corrects it, because lastInitialValue also starts at 0. Note that Slider forwards value={0} as undefined (passedValue), so the web component can't tell "no value" apart from value={0}. Because of that, the ?? approach suggested in the issue wouldn't fix it on its own.

Change: fall back to minimumValue only when 0 lies outside [minimumValue, maximumValue]. When the range includes 0, the initial value is 0, which matches the documented default and the currentValue that Slider already uses for step markers. Nothing else changes: non-zero values work as before, ranges where 0 is below the minimum still start at minimumValue, and the effect guard for uncontrolled sliders is untouched.

Test Plan:

Added package/__test__/RNCSliderNativeComponent.web.test.tsx. It renders the web component, fires responderGrant, and checks the value passed to onRNCSliderSlidingStart and the minimum track's flexGrow (the thumb position as a percentage).

  • Before the fix: 2 of the 4 new tests fail (value={0} and no value with range -8...8 report -8 instead of 0).
  • After the fix: all pass. npx eslint src __test__ reports 0 errors (same warnings as main), and npx tsc --noEmit passes.

Note: npx jest currently fails on main for every suite (this._moduleMocker.clearMocksOnScope is not a function). The react-native jest preset's environment resolves jest-environment-node@29 against jest@30, and CI shows the same failure. I ran the suite locally with a jest 30 node environment (--testEnvironment pointing at a copy of react-native/jest/react-native-env.js that extends jest-environment-node@30): 5 suites / 20 tests pass. This PR doesn't change the jest setup.

This fix was prepared with AI assistance (Claude Code) and verified locally with the tests above.

🤖 Generated with Claude Code

The web component seeded its internal state with
`initialValue || minimumValue`, so `value={0}` (which Slider forwards as
`undefined`, defaulted back to `0`) started the thumb at `minimumValue`
whenever the minimum is negative. The layout effect cannot correct it
because `lastInitialValue` also starts at `0`.

Only fall back to `minimumValue` when 0 lies outside the range.

Co-Authored-By: Claude Opus 5.5 <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.

Web: value={0} with a negative minimumValue renders the thumb at the minimum

1 participant