diff --git a/web/src/features/dev/debug/input.ts b/web/src/features/dev/debug/input.ts
index 3a9b4fa..fc14b36 100644
--- a/web/src/features/dev/debug/input.ts
+++ b/web/src/features/dev/debug/input.ts
@@ -1,30 +1,36 @@
 import { debugData } from "../../../utils/debugData";
-import {InputProps} from "../../dialog/InputDialog";
+import { InputProps } from "../../dialog/InputDialog";
 
 export const debugInput = () => {
   debugData<InputProps>([
-  {
-    action: "openDialog",
-    data: {
-      heading: "Police locker",
-      rows: [
-        { type: "input", label: "Locker number", placeholder: "420" },
-        { type: "checkbox", label: "Some checkbox" },
-        { type: "input", label: "Locker PIN", password: true, icon: "lock" },
-        { type: "checkbox", label: "Some other checkbox", checked: true },
-        {
-          type: "select",
-          label: "Locker type",
-          options: [
-            { value: "option1" },
-            { value: "option2", label: "Option 2" },
-            { value: "option3", label: "Option 3" },
-          ],
-        },
-        { type: "number", label: "Number counter", default: 12 },
-        { type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 },
-      ],
+    {
+      action: "openDialog",
+      data: {
+        heading: "Police locker",
+        rows: [
+          { type: "input", label: "Locker number", placeholder: "420" },
+          { type: "checkbox", label: "Some checkbox" },
+          { type: "input", label: "Locker PIN", password: true, icon: "lock" },
+          { type: "checkbox", label: "Some other checkbox", checked: true },
+          {
+            type: "select",
+            label: "Locker type",
+            options: [
+              { value: "option1" },
+              { value: "option2", label: "Option 2" },
+              { value: "option3", label: "Option 3" },
+            ],
+          },
+          {
+            type: "number",
+            label: "Number counter",
+            default: 12,
+            min: 3,
+            max: 10,
+          },
+          { type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 },
+        ],
+      },
     },
-  },
-]);
-}
\ No newline at end of file
+  ]);
+};
diff --git a/web/src/features/dialog/components/number.tsx b/web/src/features/dialog/components/number.tsx
index d5e74c0..a8aab5b 100644
--- a/web/src/features/dialog/components/number.tsx
+++ b/web/src/features/dialog/components/number.tsx
@@ -18,13 +18,18 @@ interface Props {
 
 const NumberField: React.FC<Props> = (props) => {
   useEffect(() => {
-    if(props.row.default) props.handleChange(props.row.default, props.index);
+    if (props.row.default) props.handleChange(props.row.default, props.index);
   }, []);
 
   return (
     <Box mb={3}>
       <Text>{props.row.label}</Text>
-      <NumberInput onChange={(val: string) => props.handleChange(+val, props.index)} defaultValue={props.row.default}>
+      <NumberInput
+        onChange={(val: string) => props.handleChange(+val, props.index)}
+        defaultValue={props.row.default}
+        min={props.row.min}
+        max={props.row.max}
+      >
         <NumberInputField placeholder={props.row.placeholder} />
         <NumberInputStepper>
           <NumberIncrementStepper />