Thumb "drag point" is not centered on thumb

[gimi-anders]

The dragging point on the thumb seems to be located on the very left point of the thumb. This causes a "jump" when pressing the center of the thumb to drag it. An even bigger "jump" is seen when pressing on the right side of the thumb when starting to drag it.

Only way to get a smooth start of dragging is to press on the very left side of the thumb.

I am using a custom thumb, and I have set the thumb width prop to get it to fit within the track.
I can add a negative margin equal to the half of the width on my custom thumb to make the dragging work as it should (centered), but that will cause it to overflow on the left side of the track, and not reach the end of the right side of the track.

Video of the issue. First I am dragging the thumb by clicking on the right side. Then I am dragging it by clicking on the left side. As you can see, the mouse pointer is fixed to the left side of the thumb, but it should be fixed to the center.

Screen.Recording.2023-11-27.at.17.04.09.mov

[alantoa]

hey @gimi-anders , could you please put your example code to https://snack.expo.dev/? happy to take a look at it.

[gimi-anders]

@alantoa Expo snack does not seem to be able to use this library (or could you provide an example snack that works?)

Anyway, here you can see the code for my example (you can just remove the icons in the thumb if you like):

  const renderThumb = useCallback(
    () => (
      <View style={styles.thumb}>
        <Icon
          name={ANGLE_LEFT}
          color={Colors.whiteLilac}
          style={[styles.icon, { marginLeft: 1 }]}
        />
        <Icon
          name={ANGLE_RIGHT}
          color={Colors.whiteLilac}
          style={styles.icon}
        />
      </View>
    ),
    [],
  );
  
<Slider
        style={[styles.slider]}
        theme={{
          minimumTrackTintColor: Colors.blue,
          maximumTrackTintColor: Colors.whiteLilac,
        }}        
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        sliderHeight={3}
        renderThumb={renderThumb}
        thumbWidth={42}
      />
      
const styles = StyleSheet.create({
  slider: {
    width: "100%",
    height: 42,
    flex: 0,
  },
  thumb: {
    flexDirection: "row",
    backgroundColor: Colors.blue,
    height: 42,
    width: 42,
    borderRadius: 42,
    justifyContent: "center",
    alignItems: "center",
  },
  icon: {
    fontSize: 11,
  },
});      

[alantoa]

@gimi-anders thanks, I will check it out soon when I'm free

[Bayramito]

patch it yourself in slider.tsx

search for

left: -bubbleMaxWidth / 2

change it to

left: -bubbleMaxWidth / 2 - thumbWidth / 2,

[CalvinNFT]

patch it yourself in slider.tsx

search for

left: -bubbleMaxWidth / 2

change it to

left: -bubbleMaxWidth / 2 - thumbWidth / 2,

Could this solution be added to mainline? Same issue here with custom bubble and thumb. Fixed them by applying a custom style, works but suboptimal. Future me needs to do more maintanance of code.

[hazelmeow]

I downgraded to 2.5.2 and it fixed this issue for me. @alantoa do you remember why this fix was reverted in 2.5.3?