Slider Value gets "stuck" when rapidly tapping to move position

[spiralman]

Describe the bug If you rapidly tap/click on the slider to move the position, the slider will eventually get "stuck" at a fixed position. All calls to the onSlidingStart and onSlidingComplete callbacks will receive the "stuck" value (which is whatever the value prop is set to), but calls to onValueChange will receive the actual value represented by the position the user tapped/clicked.

This is easily reproduced with your demo app, without changes. We've also reproduced this in Android and iOS apps (not using Expo).

To Reproduce

• Go to the standard demo
• Rapidly click on the slider to jump to different positions
• Eventually, the thumb will stop updating its position.
• You can see that, on the console logs, the onSlidingStart and onSlidingComplete callbacks get the "stuck" value (whatever the value prop is set to), but the onValueChange callback gets the correct value for wherever you click/drag.

Expected behavior The thumb should not get "stuck", the callback to onSlidingStart and onSlidingComplete should get a value representative of the position the user tapped/clicked/dragged the thumb, not whatever the current value prop is set to.

Screenshots See this example console output, from after the bug has been triggered:

Please complete the following information:

• OS: All (iOS, Android and Web)
• @react-native-assets/slider version latest (7.2.1)

Additional context Note: it appears to be possible to work around this issue by updating the parent component's value state in the onValueChange callback, which causes the correct value to be passed back down into the slider, thus resulting in the onSlidingStart/Complete callbacks getting the updated value.

[Sharcoux]

Interesting. I could reproduce, but I really had to go crazy on the slider. I'll try to check what's going on. The issue is that I had to borrow a mouse to reproduce the issue and I don't have one for now :sweat_smile:

[spiralman]

Thanks @Sharcoux. FWIW, I've found an easy way to reproduce it on a phone is, if the slider goes full-width on the device, you can use your two thumbs to tap back and forth between the left and right sides of the slider more rapidly than with a single finger (although, I can definitely get it to happen with just a single finger).

[Sharcoux]

Did you try with the latest version? The snack uses an older version.

[spiralman]

@Sharcoux We can reproduce the bug using 7.2.1, which is the current latest version.

[Sharcoux]

Ok. I can reproduce the bug in the snack, but I can't reproduce it locally. Did the bug occur anywhere else? If you succeed to reproduce the bug locally, can you add this line in "useThumb": console.log(updated, nextValue.current, value) and give me the logs?

[spiralman]

I can reproduce the bug locally, but I'm going to be out of town this week, so I'm not sure when I'll be able to get to this.

--Thomas

On Mon, Sep 30, 2024, 2:03 AM François Billioud @.***> wrote:

Ok. I can reproduce the bug in the snack, but I can't reproduce it locally. Did the bug occur anywhere else? If you succeed to reproduce the bug locally, can you add this line in "useThumb": console.log(updated, nextValue.current, value) and give me the logs?

— Reply to this email directly, view it on GitHub https://github.com/Sharcoux/slider/issues/100#issuecomment-2382273914, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ34CBV6KUURQQ6GQEYE5DZZDZTXAVCNFSM6AAAAABOYTGMV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBSGI3TGOJRGQ . You are receiving this because you authored the thread.Message ID: @.***>

[Sharcoux]

@spiralman Any update?

[spiralman]

Sorry, I was out of town the week you sent that request, and then completely dropped the ball when I got back.

We can reproduce the issue locally, but right now have the workaround in place in our application.

I'll see if I can find some time to reproduce the issue with the added logging this week.

Thanks, --Thomas

On Mon, Oct 28, 2024, 7:18 AM François Billioud @.***> wrote:

@spiralman https://github.com/spiralman Any update?

— Reply to this email directly, view it on GitHub https://github.com/Sharcoux/slider/issues/100#issuecomment-2441431053, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ34CGEFOV5XJQNYTYCKATZ5YMR5AVCNFSM6AAAAABOYTGMV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBRGQZTCMBVGM . You are receiving this because you were mentioned.Message ID: @.***>

[Sharcoux]

Can you check if you also reproduce this with v8.0.2?

[tockv]

Seeing this issue too, and definitely reproducible in v8.0.2.

Here's the logs as requested above, using the console.log(updated, nextValue.current, value) pattern inside the useThumb hook. I also added a second log line for anytime it got inside the if (updated) part of the [updated] dependent useEffect, asupdated looks to be the culprit here:

...
 LOG  false 0.4508 0.4508
 LOG  true 0.4512 0.4508
 LOG  >> hits [updated] useEffect, updated is true
 LOG  false 0.4512 0.4508
 LOG  true 0.45566666666666666 0.4508
 LOG  >> hits [updated] useEffect, updated is true
 LOG  true 0.4570666666666667 0.4508
 LOG  true 0.4570666666666667 0.4570666666666667
 LOG  true 0.4570666666666667 0.4570666666666667
 LOG  true 0.4570666666666667 0.4570666666666667
 LOG  true 0.4709333333333333 0.4570666666666667
 LOG  true 0.4874 0.4570666666666667
 LOG  true 0.5040666666666667 0.4570666666666667
 LOG  true 0.5207333333333334 0.4570666666666667
 LOG  true 0.5376 0.4570666666666667
 LOG  true 0.5376 0.4570666666666667
 LOG  true 0.54 0.4570666666666667
 LOG  true 0.54 0.4570666666666667
 ...

[Sharcoux]

setUpdated(false) seems to be completely ignored at some point. My guess is that React drops the change to automatically apply the latest value when it starts lagging. I'll fix, but I'm worried to fire too many events. But I guess I'll trust React to handle that.

[Sharcoux]

Should be solved in v8.0.3. Please report any problem. Thanks a lot for the logs @tockv , that helped a lot!

[spiralman]

@Sharcoux Thanks! I was able to confirm that 8.0.3 appears to resolve the issue in the minimal app I build to reproduce it, in order to give you those debug logs (which @tockv beat me to; thanks!).

I don't know that we'll be able to pull in the new version to our actual application, to confirm it works in the wild, for a bit, but feel free to mark the bug resolved, and we can always open a new one if we find further issues.

[MartinHarkins]

Thanks a lot, 8.0.3 fixes it for us too. Won't go out to prod for another week or so though but looks promissing :)