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-3 form-group mb-0">
        <div class="input-group mt-4">
            <input #rf type="number" class="form-control" [formControl]="radiusField" (input)="radiusChange(rf.value)" autocomplete="off">
            <div class="input-group-append">
                <span class="input-group-text">arcsecond</span>
            </div>
        </div>
    </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>