Ionic 6: How to hide the first and last tick from an ion-range slider?

Question

I'm using the ion-range component in my Ionic 6 project to create a slider with a step value and ticks displayed on the slider. Here's the code I'm using to create the slider:

<ion-range
  [min]="0"
  [max]="50"
  [pin]="true"
  [ticks]="true"
  [snaps]="true"
  [step]="5"
></ion-range>

This creates a slider with ticks displayed at each step, including the first and last tick. However, the design requirement for my project is to hide the first and last tick from the slider UI.

I've tried adding the display:none CSS property to the first and last ticks using this ion-range::part(tick-active):first-child and ion-range::part(tick):last-child to hide first & last tick from slider.

Already tried :first-of-type and :last-of-type too, but it doesn't seem to work. Here's the code I tried:

// To hide first tick from the ion-range
ion-range::part(tick-active):first-child {
 display: none;
}
ion-range::part(tick-active):first-of-type {
 display: none;
}

// To hide Last tick from the ion-range
ion-range::part(tick):last-child {
 display: none;
}
ion-range::part(tick):last-of-type {
 display: none;
}

Is there a way to hide the first and last tick from the ion-range slider in Ionic 6? Any help would be appreciated. Thank you!