Change Text on Range Knob pin=true


#1

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?


#2

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


#3

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>
      </ion-range>

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!


#4

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`;
    this._elementRef.nativeElement
      .querySelector('.range-knob-handle')
      .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.


#5

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