Thumb is not synced with slider

[SorooshDeveloper]

Hello when i use custom renderThumb, thumb will get an offset from the slider as the image below shows when progress is 100 thumb should be exactly on the last step but it has a margin!

this my render thumb :

         renderThumb={() => (
                <View
                  style={{
                    height: 10,
                    width: 10,
                    backgroundColor: theme.background,
                    borderWidth: 1,
                    borderColor:
                      orderSide === 'buy' ? theme.marketGreen : theme.marketRed,
                    transform: [{rotate: '45deg'}],
                  }}
                />
              )}

[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 i needed to set both mark width and thumbwidth to fix the issue!

[SorooshDeveloper]

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