Changing ticks height in ion-range

I’m trying to implement some functions that use ion-range as input. The functions are okay, my problem is related to the aesthetic issue of the ion-range element. Although there is this option to implement ticks in the documentation, they are the same height as the bar, making them very difficult to see if the primary color of the app is not dark enough.

I managed to modify it through the dev console and was able to acquire the style I wanted. I tried to modify the .range-tick class that is created, but to no avail. I saw a similar question that change the style of the range pin, but how can access this options for the range-tick?

I dev console I can see that style is currently this way:

.range-tick {
    position: absolute;
    top: calc((var(--height) - var(--bar-height)) / 2);
    width: var(--bar-height);
    height: var(--bar-height);
    background: var(--bar-background-active);
    z-index: 1;
    pointer-events: none;
}

From this question suggestion I tried to add the currently empty variable --bar-height in my :root (src/theme/variables.scss), but this don’t change anything.

I want to modify the class to include this options:

.range-tick {
    position: absolute;
    top: 25%; // <-- Changed
    width: var(--bar-height);
    height: 20px; // <-- Changed
    background: var(--bar-background-active);
    z-index: 1;
    pointer-events: none;
}

I also tried to modify the range.md.css and range.ios.css files located in project_folder/node_modules/@ionic/core/dist/collection/components/range/, which looks exactly what I can see in dev console. After modify the class and recompile nothing has changed, in dev console Inspector I can see that the class is still using the initial class and not the modified one.