radius.component.html

<div class="row">
    <div class="col form-group mb-0">
        <label>Radius</label>
        <input #rr 
            type="range" 
            min="0" 
            max="150" 
            [formControl]="radiusRange" 
            (input)="radiusChange(rr.value)" 
            class="form-control-range mt-2" 
            autocomplete="off">
    </div>
    <div class="col-2 form-group mb-0">
        <input #rf 
            type="number"
            [formControl]="radiusField"
            (input)="radiusChange(rf.value)" 
            class="form-control mt-4" 
            autocomplete="off">
    </div>
    <div *ngIf="radiusField.invalid && (radiusField.dirty || radiusField.touched)" class="col-12 text-danger">
        <div *ngIf="radiusField.errors.range">
            {{ radiusField.errors.range.value }}
        </div>
    </div>
</div>