diff --git a/code/frontend/src/app/ui/number-input/number-input.component.html b/code/frontend/src/app/ui/number-input/number-input.component.html
index 33abb613..bf783881 100644
--- a/code/frontend/src/app/ui/number-input/number-input.component.html
+++ b/code/frontend/src/app/ui/number-input/number-input.component.html
@@ -27,7 +27,7 @@
     [step]="step()"
     [value]="value()"
     (input)="onInput($event)"
-    (blur)="blurred.emit($event)"
+    (blur)="onBlur($event)"
   />
   @if (suffix()) {
     <span class="number-suffix">{{ suffix() }}</span>
diff --git a/code/frontend/src/app/ui/number-input/number-input.component.ts b/code/frontend/src/app/ui/number-input/number-input.component.ts
index 0e8139ac..b357cc7f 100644
--- a/code/frontend/src/app/ui/number-input/number-input.component.ts
+++ b/code/frontend/src/app/ui/number-input/number-input.component.ts
@@ -34,21 +34,22 @@ export class NumberInputComponent {
       this.value.set(null);
       return;
     }
+    this.value.set(Number(target.value));
+  }
 
-    let num = Number(target.value);
-    const minVal = this.min();
-    const maxVal = this.max();
-
-    if (minVal != null) {
-      num = Math.max(num, minVal);
+  onBlur(event: FocusEvent): void {
+    const current = this.value();
+    if (current != null) {
+      let clamped = current;
+      const minVal = this.min();
+      const maxVal = this.max();
+      if (minVal != null) { clamped = Math.max(clamped, minVal); }
+      if (maxVal != null) { clamped = Math.min(clamped, maxVal); }
+      if (clamped !== current) {
+        this.value.set(clamped);
+      }
     }
-
-    if (maxVal != null) {
-      num = Math.min(num, maxVal);
-    }
-    
-    target.value = String(num);
-    this.value.set(num);
+    this.blurred.emit(event);
   }
 
   increment(): void {