Thumb is not synced with slider

[SorooshDeveloper]

Thumb is not synced with slider

[SorooshDeveloper]

@alantoa i needed to set both mark width and thumbwidth to fix the issue!

[SorooshDeveloper]

A simple workaround is to manually add a margin

const SliderThumb = ({orderSide, progress}) => {
  const {theme} = useTheme();
  const backColor = orderSide === 'buy' ? theme.marketGreen : theme.marketRed;

  const animatedStyle = useAnimatedStyle(() => {
    return {
      marginLeft: interpolate(progress.value, [0, 100], [0, 8]),
    };
  });
  return (
    <Animated.View
      style={[
        animatedStyle,
        {
          height: 10,
          width: 10,
          backgroundColor: theme.background,
          borderWidth: 1,
          borderColor: backColor,
          transform: [{rotate: '45deg'}],
          zIndex: 99999,
        },
      ]}
    />
  );
};

[alantoa]

@SorooshDeveloper hey, what if you added the thumbWidth prop to the Slider?

[SorooshDeveloper]

@alantoa this is fixed i will close this issue, thanks for the help.