Custom step layout issue

[Resource-4]

Expected OUTPUT :-

Current OUTPUT :-

How to apply padding/margin before starting the step and ending the step after that sync position of the Thumb in the center?

    <Slider
        style={{ marginHorizontal: 10, borderRadius: 30 }}
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        step={10}
        renderMark={() => {
          return (
            <View
              style={{
                height: 15,
                borderRadius: 30,
                backgroundColor: Color.GRAYSCALE,
                borderWidth: 2,
                borderColor: Color.GRAYSCALE,
              }}
            />
          );
        }}
        theme={{
          maximumTrackTintColor: Color.GRAYSCALE,
          minimumTrackTintColor: Color.GRAYSCALE,
          cacheTrackTintColor: Color.GRAYSCALE,
        }}
        thumbWidth={30}
        renderThumb={() => {
          return (
            <View
              style={{
                width: 24,
                height: 24,
                borderRadius: 12,
                backgroundColor: Color.VERMILION,
              }}
            />
          );
        }}
        renderBubble={() => {
          return <></>;
        }}
        snapToStep={true}
      />