`allowTouchTrack` Slider thump position is off when sliding

Explain what you did (Required)

I am using the Slider component. I was upgrading from version 2.0.4 to 2.2.1 in order to access the new allowTouchTrack prop. Before this upgrade, when sliding, the thumb was at the exact same position of the finger.

Expected behavior (Required)

The behaviour hasn’t changed.

Describe the bug (Required)

The bug is, that the slider’s thumb position is a bit ahead of the actual click/grab position. See the video below.

To Reproduce (Required)

We highly recommend that you re-create the bug on Snack. If not, list the steps that a reviewer can take to reproduce the behaviour:

By any means, I am willing to create a reproduction. I am not sure whether this bug is at your attention currently, or whether this is something specific that happens on my side. I will create a reproduction in the next 24 hours. Would be interesting to know meanwhile, whether this happens to other users as well.

When turning the prop allowTouchTrack on, the behaviour occurs. When turning it off everything is okay again.

Screenshots (Required) Video link

Your Environment (Required):

software	version
react-native-elements	2.2.1
react-native	0.63.2

[hannojg]

Okay, reproduction is super simple: just create a slider and set the allowTouchTrack prop:

https://snack.expo.io/@hannojg/allowtouchtrack-bug

[pranshuchittora]

Hi @hannojg that’s the intended behaviour. If you press and hold and drag the slider will change as this is the intended behaviour of the Pan Gesture Handler.

What could have been a bug? If the slider responds outside its area.

The area of response is equal to the height.

Try this on the Playground Here -> https://react-native-elements.js.org/#/slider

Paste the below code.

import * as React from "react";
import { Slider, Icon } from "react-native-elements";

export default () => {
  return (
    <Slider
      animateTransitions
      animationType="timing"
      maximumTrackTintColor="#ccc"
      maximumValue={100}
      minimumTrackTintColor="#222"
      allowTouchTrack
      onSlidingComplete={() =>
        console.log("onSlidingComplete()")
      }
      onSlidingStart={() =>
        console.log("onSlidingStart()")
      }
      onValueChange={value =>
        console.log("onValueChange()", value)
      }
      orientation="horizontal"
      step={1}
      style={{ width: "80%", height: 10 }}
      thumbStyle={{ height: 20, width: 20 }}
      thumbProps={{
        children: (
          <Icon
            name="heartbeat"
            type="font-awesome"
            size={20}
            reverse
            containerStyle={{ bottom: 20, right: 20 }}
            color="#f50"
          />
        )
      }}
      thumbTintColor="#0c0"
      thumbTouchSize={{ width: 2, height: 2 }}
      trackStyle={{ height: 10, borderRadius: 20 }}
      value={50}
    />
  );
}