Skip to content

Slider doesn't work in a horizontal scrolling container on web (e.g. tab view) #471

Closed
@motiz88

Description

@motiz88

Environment

N/A, reproduces on Snack

Description

If a slider is rendered inside a container that can scroll horizontally, the cached container X position is not cleared on scroll, which throws off the calculation in getValueFromNativeEvent and makes the slider unusable.

One implication of this - and where it bit me - is that the component can't be used reliably inside a tab view that relies on scrolling (e.g. @react-navigation/material-top-tabs). This manifests as sliders being completely unresponsive on all tabs except the one that was initially opened during the tab view's first render.

Reproducible Demo

https://snack.expo.dev/@motiz88/slider-horizontal-slide-bug

Screen.Recording.2022-12-27.at.18.10.55.mov

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug reportSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions