Can't both, subscribe to update and set value manually in ionic ion-range

Issue

I just started my first ionic app project.

In my player.component.html I got that <ion-range>-element:

<ion-range min="0" color="light" [max]="state?.duration" [formControl]="seekbar"
             [value]="state?.currentTime" (ionFocus)="onSeekStart($event)" (ionChange)="onSeekEnd($event)"
             name="seekbar">
</ion-range>

and my player.component.ts looks like this:

export class PlayerComponent implements OnInit {
  files: any = [];
  seekbar: FormControl = new FormControl('seekbar');
  state: StreamState | null = null;
  onSeekState: boolean;
  currentFile: any = {};

  constructor(
    public audioProvider: AudioService,
    public cloudProvider: CloudService,
    public auth: AuthenticationService
  ) {
    
    this.audioProvider.getState().subscribe(s => {
      this.state = s;
    });
  } 

    onSeekEnd(event) {
        const val = event.detail.value;

      if (this.onSeekState) {
        this.audioProvider.seekTo(val);
        this.play();
      } else {
        this.audioProvider.seekTo(val);
      }

      this.seeking = false;
    }

so the state of audioProvider is subscribed and the ion-ranges values gets updated.

Now I want to implement, when I click somewhere on the range, the current value needs to get changed. Possible actions are (ionChange) and (ionBlur) - both are fired when click on the range.

my problem is, I cant't use ionChange nor ionBlur:

• (ionChange) is always fired when the value changes. and the value changes always when audioProvider is playing.
• (ionBlur) doesn't provide the value. I can't get the value of that event and set it.

any idea what I could do?

Solution

it finally worked with event.target.value on onBlur()

onSeekEnd(event) {
  const val = event.target.value;

  if (this.onSeekState) {
    this.audioProvider.seekTo(val);
    this.play();
  } else {
    this.audioProvider.seekTo(val);
  }

  this.seeking = false;
}

Answered By - Matthias Burger