Change Text on Range Knob pin=true

Ionic Framework ionic-v3
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 Likes
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>

image

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 Likes
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

6

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

7

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

8

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
9

Excellent! thanks, this has worked for me.