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="w-100 d-block d-lg-none"></div>
    <div class="col col-lg-auto form-group mb-0">
        <div class="input-group mt-4">
            <input #rf id="radius-field" 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>