Repository navigation
fix(web): count steps from minimumValue - #841
RaphaelFakhri wants to merge 2 commits into
Conversation
BartoszKlonowski
left a comment
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
| // 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 |
There was a problem hiding this comment.
I think the same calculation should be done for the accessibilityActions function to keep the behavior consistent.
There was a problem hiding this comment.
As per: https://github.com/callstack/react-native-slider/pull/841/changes#r4335127201
| updateValue(Math.round((value + step - minimumValue) / step) * step + minimumValue); |
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>
|
@BartoszKlonowski Thanks for the review. 9f0b648 applies all three threads:
|
Summary:
On web, the slider snaps a dragged or tapped value to the nearest multiple of
stepcounted from 0 instead of fromminimumValue. WhenminimumValueis not a multiple ofstep, the slider returns values outside the step grid. For example, withminimumValue={1},maximumValue={10}andstep={2}, releasing a quarter of the way along the track reports4instead of3, and every reachable value is even, so1, 3, 5, 7, 9are 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) / stepand addsminimumValueback, matching the native platforms. The existing precision rounding and bounds clamping inupdateValuestill apply.Test Plan:
Added
package/__test__/RNCSliderNativeComponent.web.test.tsx. It renders the web component withminimumValue={1},maximumValue={10},step={2}, releases the thumb at given track positions, and checks the value passed toonRNCSliderSlidingComplete, both normal andinverted.npx jest __test__/RNCSliderNativeComponent.web.test.tsxfails 2 of 2 tests (Expected: 3,Received: 4).npm test: 5 suites, 18 tests pass.npm run lint: no errors (only warnings that were already there).Fixes #840