how to synchronize slide value into an input field in reactive form

I have now a problem and I don’t know, how to synchronize the slide value into an input field in reactive form.

I show my code:

<div fxLayout="row">
    <mat-slider class="slider" color="primary" max="1" min="0" step="0.1" thumb-label="true"
                [(ngModel)]="dataService.adress"
                [disabled]="!dsearchDataService.sendAdress"
    ></mat-slider>
    <form [formGroup]="addressForm">
      <mat-form-field class="input">
        <input matInput type="number" step="0.1" max="1" min="0" maxlength="3"
               [(ngModel)]="dataService.address"
               formControlName="address">
        <mat-error *ngIf="address.invalid">Ivalid Value</mat-error>
      </mat-form-field>
    </form>
  </div>

now you see, in this reactive form before changing the code, I used ngModel to bind two values between slide and input field.

but in reactive form, ngModel should be removed instead formControlName.

in ts file:

public ngOnInit(): void{
    this.addressForm = this.fb.group({
      address: new FormControl({value: this.dataService.address, disabled: !this.dataService.sendAddress}, [Validators.pattern('/^[0-9]*$/'])
    });
  }

my problem is, now I want to synchronize the slide value into input field, if slide value changed.

any solutions??

Source: Angular Questions