<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>