Reactivesearch: RangeSlider onDrag functionality when used with labels lagging on Mobile

[davkap92]

Affected Projects
React

Library Version: 3.2.4

Describe the bug

When I use the onDrag functionality added here (https://github.com/appbaseio/reactivesearch/pull/305)
I've just noticed that when I put the values from onDrag into the labels it works fine on desktop
but on mobile using touch it lags severely. I have created a sandbox below, however please try this sandbox in mobile or chrome mobile emulation to see the issue. Not sure if this is a Rheostat issue and has been addressed in a newer version or something else.

To Reproduce

Steps to reproduce the behavior:
https://codesandbox.io/s/fast-microservice-6ocl0
URL to try on mobile - https://6ocl0.csb.app/

Expected behavior

The dragging of the slider should be smooth on mobile

[davkap92]

@bietkul @jyash97 any update here? Thanks

[jyash97]

Hey @davkap92
Thanks for the submitting the issue. I was able to reproduce the bug. Will check into it if it's coming from Rheostat or not.

[davkap92]

@jyash97 any updates if it was an older Rheostat version and if it can be updated?
Thanks

[davkap92]

@bietkul @jyash97 Hi sorry just following up on this please. Thanks

[jyash97]

Hey @davkap92

Sorry for the delay in responding. I was looking into the changelog of rheostat and they have migrated their styling which will be breaking change because it cannot accept className. But in order to fix this issue, I am testing by upgrading to version 2.2.0 and it seems to work. If this works out well, I will be creating a PR with the appropriate demo videos.

[jyash97]

Hey @davkap92 Let me know if the demo videos in the referenced PR make sense and after locally testing I can confirm the dragging behavior is better.

[davkap92]

Hi @jyash97 thanks for the updates, from the looks of the 'after' video the label
isn't changing anymore though.. perhaps something has changed with how the rheostat labels in newer version? thanks

[jyash97]

No @davkap92

I recorded the video for this sandbox: https://codesandbox.io/s/fast-microservice-6ocl0 ( mentioned above ), and the end key is changing on dragging that's why you see the change in Label.

Also now I think the suspect might be the state updates due to the key if you remove the key everything work as expected.

[jyash97]

I can confirm the above behavior happens with the current PR as well, I think the issue should have been to update the label based on current values. Right ?

[davkap92]

So to clarify, default behaviour works fine, i wanted to implement labels that change on drag ( which i created for the above mentioned sandbox),
and when I implemented that by updating end label, it now lags on mobile. But as far as I can remember it didn't use to. Hope that clarifies thanks

[davkap92]

Sorry perhaps the issue title could have been clearer - RangeSlider onDrag functionality when used with labels lagging on Mobile

[davkap92]

@jyash97 hi any progress on this? Thanks

[davkap92]

I found the toolTip seems to give me what I need and doesn't appear to lag much, so will close thanks