Skip to content

fix(web): count steps from minimumValue - #841

Open
RaphaelFakhri wants to merge 2 commits into
callstack:mainfrom
RaphaelFakhri:fix/web-step-from-minimum
Open

RaphaelFakhri wants to merge 2 commits into
callstack:mainfrom
RaphaelFakhri:fix/web-step-from-minimum

Conversation

@RaphaelFakhri

Copy link
Copy Markdown

Summary:

On web, the slider snaps a dragged or tapped value to the nearest multiple of step counted from 0 instead of from minimumValue. When minimumValue is not a multiple of step, the slider returns values outside the step grid. For example, with minimumValue={1}, maximumValue={10} and step={2}, releasing a quarter of the way along the track reports 4 instead of 3, and every reachable value is even, so 1, 3, 5, 7, 9 are never produced. iOS already counts steps from the minimum (RNCSlider.m), and Android counts its progress steps from the minimum too.

This change rounds (value - minimumValue) / step and adds minimumValue back, matching the native platforms. The existing precision rounding and bounds clamping in updateValue still apply.

Test Plan:

Added package/__test__/RNCSliderNativeComponent.web.test.tsx. It renders the web component with minimumValue={1}, maximumValue={10}, step={2}, releases the thumb at given track positions, and checks the value passed to onRNCSliderSlidingComplete, both normal and inverted.

  • Without the fix: npx jest __test__/RNCSliderNativeComponent.web.test.tsx fails 2 of 2 tests (Expected: 3, Received: 4).
  • With the fix: the same command passes 2 of 2 tests.
  • npm test: 5 suites, 18 tests pass.
  • npm run lint: no errors (only warnings that were already there).

Fixes #840

@BartoszKlonowski BartoszKlonowski left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a valid fix and I'll approve it, but the merge can only happen as soon as v6 will land on main branch.
The reason I don't want to merge it to v5 is that the fix may in fact be not backward-compatible. If a user already adjusted the code to work around the bug, then shipping this fix will require certain refactor on their side.
Thank you @RaphaelFakhri for the fix and for the patience :)

? maximumValue - ((maximumValue - minimumValue) * x) / width
: minimumValue + ((maximumValue - minimumValue) * x) / width;

// Steps are counted from minimumValue, as on the native platforms

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Steps are counted from minimumValue, as on the native platforms

// Steps are counted from minimumValue, as on the native platforms
const valueAfterStep = step
? Math.round(newValue / step) * step
? minimumValue + Math.round((newValue - minimumValue) / step) * step

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the same calculation should be done for the accessibilityActions function to keep the behavior consistent.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per: https://github.com/callstack/react-native-slider/pull/841/changes#r4335127201

Suggested change
updateValue(Math.round((value + step - minimumValue) / step) * step + minimumValue);

@BartoszKlonowski BartoszKlonowski added the v6 Issues that are either resolved by, or checked against the v6 release label Oct 21, 2026
Round the increment and decrement accessibility actions to the step grid
that starts at minimumValue, as dragging does. Without a step, the
actions still move by a tenth of the range.

Co-authored-by: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com>
@RaphaelFakhri

Copy link
Copy Markdown
Author

@BartoszKlonowski Thanks for the review. 9f0b648 applies all three threads:

  • Removes the comment line.
  • Uses the same calculation for both accessibilityActions cases: Math.round((value ± step - minimumValue) / step) * step + minimumValue. The suggested line divides by step, and Slider defaults step to 0, so the calculation runs only when step is set. Without a step, the actions still move by a tenth of the range, as before.
  • Adds a test for the accessibility actions. With value: 5, minimumValue: 1 and step: 3, increment now gives 7 and decrement gives 1.

npx jest passes (5 suites, 19 tests). Without the accessibilityActions change, the new test fails (expected 7, received 8). npx eslint reports no errors on the changed files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v6 Issues that are either resolved by, or checked against the v6 release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Web: step snapping ignores minimumValue

2 participants