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}
        />

[dule-vikki]

Same issue.

@alantoa This issue makes the UI is very bad. Help me fix it soon.