Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with Thumb Positioning in Web Implementation #567

Closed
landabaso opened this issue Dec 27, 2023 · 0 comments · Fixed by #568
Closed

Issue with Thumb Positioning in Web Implementation #567

landabaso opened this issue Dec 27, 2023 · 0 comments · Fixed by #568
Labels
bug report Something isn't working platform: Web Issue relates to react-native for web

Comments

@landabaso
Copy link
Contributor

landabaso commented Dec 27, 2023

Environment: Web implementation of react-native-slider.

Problem Summary: There is an issue with the thumb positioning in the web implementation. This problem is noticeable when using sliders without the step property (such as the examples towards the end of the example-web folder, f.ex.: the one titled "trackImage").

Steps to Reproduce:

  1. Run the example-web provided in the react-native-slider repository.
  2. Navigate to one of the slider examples without a step value (e.g., the one titled "trackImage").
  3. Position the slider thumb at one of the extremes (either the very left or right end).
  4. Click on the center of the thumb.

Expected Behavior: When clicking on the center of the thumb, especially at the extremes, the thumb position should accurately represent the slider value and remain stationary if the click doesn't intend to change the value.

Actual Behavior: Upon clicking on the center of the thumb when it's positioned at one of the extremes, the thumb slightly moves towards the center and a new value is returned. It's subtle but noticeable. This issue appears to stem from the way the thumb's container is sized, which includes the thumb circle itself, leading to an offset in value representation.

Additional Information: This issue affects the usability of the slider. The problem seems to be with the calculation of the thumb's position in relation to the slider's container size, which does not account for the size of the thumb circle itself.

Note: I will be submitting a PR shortly for review and further discussion.

@landabaso landabaso added the bug report Something isn't working label Dec 27, 2023
landabaso added a commit to landabaso/react-native-slider that referenced this issue Dec 27, 2023
@BartoszKlonowski BartoszKlonowski added the platform: Web Issue relates to react-native for web label Dec 29, 2023
@BartoszKlonowski BartoszKlonowski linked a pull request Jan 3, 2024 that will close this issue
BartoszKlonowski added a commit that referenced this issue Feb 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report Something isn't working platform: Web Issue relates to react-native for web
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants