Marker is not touchable or snapped

[berdyshev]

Describe the bug Markers are not interactive. Wrapping them with Touchable has no effect, as touch events are intercepted by the ResponderView wrapper.

To Reproduce Open this snack and try clicking on the 25% or 50% markers. You'll notice it's not possible to set the slider exact value by tapping a marker.

Expected behavior It would be great to have either of the following improvements:

• The ability to handle click/tap events on markers (e.g., to update the slider value).
• Support for snapping the slider thumb to predefined marker values while dragging.

The snapping behavior would enhance user experience but might be harder to implement due to the current library architecture, which doesn’t expose a prop for defining a set of markers.

Please complete the following information:

• OS: any
• Browser: any
• @react-native-assets/slider version@latest

[Sharcoux]

Isn't slideOnTap enough to solve your case?

[berdyshev]

no, because actually I have 1000 (from 0 to 100 with step=0.1) markers while displaying only 5 of them (0, 25, 50, 75, 100), please check the snack.

[berdyshev]

@Sharcoux is there any suggestions on how to achieve this?

[Sharcoux]

Yes, you just need to re-enable the pointer events on the marks. By default, it's being disabled to make sure that custom marks don't interfere with the slider's behavior.

Just add pointerEvents="box-only" to the mark. Try this:

  const renderMark = React.useCallback((markProps) => {
    if ([0, 25, 50, 75, 100].includes(markProps.markValue)) {
      return (
        <View pointerEvents="box-only" onStartShouldSetResponder={() => true} onResponderTerminationRequest={() => false} onResponderStart={() => setValue(markProps.markValue)}>
          <Mark {...markProps} />
        </View>
      );
    }
    return null;
  }, []);