Question: Set Bounds on PanGestureHandler

I ran into an Issue building a Slider where clamping the Animated Value resulted in the Slider handle not moving immediately when you’re at the beginning or end of the Slider. But, the width of the Slider handle has to be accounted for in the interpolation so it won’t slide past the end.

Notice the Slider handle when it’s in the middle versus the ends:

The code:

this._onGestureEvent = Animated.event(
  [
    {
      nativeEvent: {
        translationX: this._translateX,
      },
    },
  ],
  {
    useNativeDriver: true,
  },
);

translateX: this._translateX.interpolate({
  inputRange: [0, SLIDER_WIDTH - SLIDER_HAHNDLE_WIDTH],
  outputRange: [0, SLIDER_WIDTH - SLIDER_HAHNDLE_WIDTH],
  extrapolate: 'clamp',
})

If I don’t use interpolate the Slider works perfectly except it will drag past the ends. What if there was a configuration prop to specify beginning and ending values where the gesture will cancel once it hits them?

[zachgibson]

Just to clarify this issue: using Animated’s interpolate with extrapolate: 'clamp' set output bounds for my Slider. My issue was logic concerning setting the offset of the Slider Handle once you dragged past the beginning or end of the Slider bounds and let go since translationX value will keep decrementing or incrementing as you “over-drag”. Once you over-drag you need to account for this and offset the Animated Value to either the start or end value which will work perfectly and not result in my issue above where your dragging the Handle but it is delayed in moving.

I tried using absoluteX instead but it resulted in the slider not always following my finger. e.g. It would speed up and go past my finger once you got closer to the beginning or end, which isn’t ideal.

@kmagiera Chime in here if you see anything I’ve said isn’t accurate. I did use your code for a lot of this dragging functionality. 😉

[zachgibson]

Figured it out! If absoluteX goes past the start or end of the Slider, I manually set offset to either 0 for the beginning or MAX_OUTPUT_RANGE for the end so _translateX will stop decrementing or incrementing and causing the delay once you try to drag again. These values—32 and width - 32—are hardcoded for my testing purposes but they equate to the left and right offset of the Slider since usually your slider will have left and right “margin”.

_onHandlerStateChange = event => {
  if (event.nativeEvent.oldState === GestureHandler.State.ACTIVE) {
    if (event.nativeEvent.absoluteX <= 32) {
      this._lastOffsetX = 0;
    } else if (event.nativeEvent.absoluteX >= width - 32) {
      this._lastOffsetX = MAX_OUTPUT_RANGE;
    } else {
      this._lastOffsetX += event.nativeEvent.translationX;
    }

    this._translateX.setOffset(this._lastOffsetX);
    this._translateX.setValue(0);
  }

  if (event.nativeEvent.state === GestureHandler.State.END) {
    this._animateSliderHandleDown();
    this._setValueCallback();
  }
};