Skip to content

Issue with Thumb Positioning in Web Implementation #567

@landabaso

Description

@landabaso

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug reportSomething isn't workingplatform: WebIssue relates to react-native for web

    Type

    No type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions