Change Text on Range Knob pin=true

The ion-range component is great. However I cannot find a way to change the text on the pin. I want to create a music player which should show values like 01:12 the position of the audio. Currently, I find no way to change the text on the pin of the ion-range component to anything else than the integer.

Does anybody know an approach to achieve this?


How does your current relevant part of your code look like?

Thanks for your reply!

      <ion-range pin="true" (ionChange)="seekPosition()" min="0" [max]="audio.duration" color="primary" [(ngModel)]="position">
        <ion-label range-left>{{ position | time }}</ion-label>
        <ion-label range-right>{{ audio.duration | time }}</ion-label>


The “time” pipe transforms an integer into a formatted time. E.g. 130 would become 02:10. It would be nice to have this kind of formatted output on the pin!


The workaround I am using is attaching an Event Listener to the range-knob-handle on pointer move.

This is the html.

<ion-range [(ngModel)]="duration" color="primary" pin="true" snaps="true" step="15" min="0" max="720"></ion-range>

This is in the component.ts

ionViewDidEnter(): void {
    this._elementRef.nativeElement.querySelector('.range-pin').textContent = `0 hours`;
      .addEventListener('pointermove', function () {
        const value = this.getAttribute('aria-valuenow');
        this.querySelector('.range-pin').textContent = `${value / 60} hours`;

In my case, I had my step at 15 and wanted to show the pin text in hours with a max being 12 hours.
This will take the range value at 360 and change it to display 6 hours or 675 and change it into 6.25 hours.

I also changed the CSS t show the pin text all the time by doing transform: none !important; on .range-pin, but is optional.

i also needed to set css “touch-action: none” to .range-knob-handle to make this work on touch devices

Can you show me the _elementRef declaration where it is declared in the constructor or in @ViewChild, thanks

I did so but it didn’t work, could give me the complete example code ?

CSS with component part styling should work for this case.

ion-range {
  padding: 0 10px 20px;
  --knob-size: 20px;
  --knob-box-shadow: 0 0 0 2px #3FBDF3;

  &::part(pin) {
    position: absolute;
    font-size: 10px;
    left: 50%;
    transform: translate3d(0, 50px, 0) scale(1) translateX(-50%);
    display: flex;
    &:after {
      content: " cards";
      margin-left: 4px;
1 Like

Excellent! thanks, this has worked for me.