diff --git a/bun.lock b/bun.lock
index 9c41f25f..5d8ad05c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -42,7 +42,7 @@
         "tailwindcss-primeui": "^0.6.1",
         "tar": "^7.5.12",
         "typescript": "^5.9.3",
-        "unplugin-vue-components": "^31.0.0",
+        "unplugin-vue-components": "^32.0.0",
         "vite": "^7.3.1",
         "vue-tsc": "^3.2.6",
       },
@@ -512,7 +512,7 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001780", "", {}, "sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001781", "", {}, "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
@@ -1212,11 +1212,11 @@
 
     "universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],
 
-    "unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],
+    "unplugin": ["unplugin@3.0.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg=="],
 
     "unplugin-utils": ["unplugin-utils@0.3.1", "", { "dependencies": { "pathe": "^2.0.3", "picomatch": "^4.0.3" } }, "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog=="],
 
-    "unplugin-vue-components": ["unplugin-vue-components@31.0.0", "", { "dependencies": { "chokidar": "^5.0.0", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.0", "obug": "^2.1.1", "picomatch": "^4.0.3", "tinyglobby": "^0.2.15", "unplugin": "^2.3.11", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@nuxt/kit": "^3.2.2 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@nuxt/kit"] }, "sha512-4ULwfTZTLuWJ7+S9P7TrcStYLsSRkk6vy2jt/WTfgUEUb0nW9//xxmrfhyHUEVpZ2UKRRwfRb8Yy15PDbVZf+Q=="],
+    "unplugin-vue-components": ["unplugin-vue-components@32.0.0", "", { "dependencies": { "chokidar": "^5.0.0", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.2", "obug": "^2.1.1", "picomatch": "^4.0.3", "tinyglobby": "^0.2.15", "unplugin": "^3.0.0", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@nuxt/kit": "^3.2.2 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@nuxt/kit"] }, "sha512-uLdccgS7mf3pv1bCCP20y/hm+u1eOjAmygVkh+Oa70MPkzgl1eQv1L0CwdHNM3gscO8/GDMGIET98Ja47CBbZg=="],
 
     "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
 
diff --git a/package.json b/package.json
index f62d9ac3..ca22e935 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260322.0",
+  "version": "0.20260324.0",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -91,7 +91,7 @@
     "tailwindcss-primeui": "^0.6.1",
     "tar": "^7.5.12",
     "typescript": "^5.9.3",
-    "unplugin-vue-components": "^31.0.0",
+    "unplugin-vue-components": "^32.0.0",
     "vite": "^7.3.1",
     "vue-tsc": "^3.2.6"
   }
diff --git a/src/renderer/bun.lock b/src/renderer/bun.lock
index 42c63f92..431fb0fb 100644
--- a/src/renderer/bun.lock
+++ b/src/renderer/bun.lock
@@ -31,7 +31,7 @@
         "tailwindcss": "^4.2.2",
         "tailwindcss-primeui": "^0.6.1",
         "typescript": "^5.9.3",
-        "unplugin-vue-components": "^31.0.0",
+        "unplugin-vue-components": "^32.0.0",
         "vite": "^7.3.1",
         "vue-tsc": "^3.2.6",
       },
@@ -359,7 +359,7 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001780", "", {}, "sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001781", "", {}, "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw=="],
 
     "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
 
@@ -663,11 +663,11 @@
 
     "unicorn-magic": ["unicorn-magic@0.4.0", "", {}, "sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw=="],
 
-    "unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="],
+    "unplugin": ["unplugin@3.0.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg=="],
 
     "unplugin-utils": ["unplugin-utils@0.3.1", "", { "dependencies": { "pathe": "^2.0.3", "picomatch": "^4.0.3" } }, "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog=="],
 
-    "unplugin-vue-components": ["unplugin-vue-components@31.0.0", "", { "dependencies": { "chokidar": "^5.0.0", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.0", "obug": "^2.1.1", "picomatch": "^4.0.3", "tinyglobby": "^0.2.15", "unplugin": "^2.3.11", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@nuxt/kit": "^3.2.2 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@nuxt/kit"] }, "sha512-4ULwfTZTLuWJ7+S9P7TrcStYLsSRkk6vy2jt/WTfgUEUb0nW9//xxmrfhyHUEVpZ2UKRRwfRb8Yy15PDbVZf+Q=="],
+    "unplugin-vue-components": ["unplugin-vue-components@32.0.0", "", { "dependencies": { "chokidar": "^5.0.0", "local-pkg": "^1.1.2", "magic-string": "^0.30.21", "mlly": "^1.8.2", "obug": "^2.1.1", "picomatch": "^4.0.3", "tinyglobby": "^0.2.15", "unplugin": "^3.0.0", "unplugin-utils": "^0.3.1" }, "peerDependencies": { "@nuxt/kit": "^3.2.2 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@nuxt/kit"] }, "sha512-uLdccgS7mf3pv1bCCP20y/hm+u1eOjAmygVkh+Oa70MPkzgl1eQv1L0CwdHNM3gscO8/GDMGIET98Ja47CBbZg=="],
 
     "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
 
diff --git a/src/renderer/package.json b/src/renderer/package.json
index 4fa5a6a8..29f00fa6 100644
--- a/src/renderer/package.json
+++ b/src/renderer/package.json
@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260322.0",
+  "version": "0.20260324.0",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && bun scripts/copy.indexdts.js",
@@ -91,7 +91,7 @@
     "tailwindcss": "^4.2.2",
     "tailwindcss-primeui": "^0.6.1",
     "typescript": "^5.9.3",
-    "unplugin-vue-components": "^31.0.0",
+    "unplugin-vue-components": "^32.0.0",
     "vite": "^7.3.1",
     "vue-tsc": "^3.2.6"
   }
diff --git a/src/renderer/src/common/constants.ts b/src/renderer/src/common/constants.ts
index d07472f4..27f99121 100644
--- a/src/renderer/src/common/constants.ts
+++ b/src/renderer/src/common/constants.ts
@@ -8,6 +8,9 @@ export const LONG_DELAY: number = 369;
 
 export const TOAST_LIFE: number = 3000;
 
+export const SPIN_INITIAL_DELAY: number = 500;
+export const SPIN_REPEAT_DELAY: number = 40;
+
 const crtYear: number = new Date().getFullYear();
 
 export const COPYRIGHT: string = crtYear === 2025 ? '2025' : `2025-${String(crtYear)}`;
diff --git a/src/renderer/src/components/widgets/InputScientificNumber.vue b/src/renderer/src/components/widgets/InputScientificNumber.vue
index 48ce4269..5389d19b 100644
--- a/src/renderer/src/components/widgets/InputScientificNumber.vue
+++ b/src/renderer/src/components/widgets/InputScientificNumber.vue
@@ -1,13 +1,55 @@
 <template>
-  <FloatLabel variant="on">
-    <InputText :model-value="internalValue" class="w-full"
-      v-bind="$attrs"
-      v-keyfilter="{ pattern: /^[+-]?(\d*(\.\d*)?|\.\d*)([eE][+-]?\d*)?$/, validateOnly: true }"
-      @update:model-value="onUpdateModelValue"
-      @blur="onBlur"
-      @keydown.enter="onKeydownEnter"
-      @paste="onPaste"
-    />
+  <FloatLabel variant="on" :class="rootAttrs.class" :style="rootAttrs.style">
+    <span :class="rootClass">
+      <InputText ref="inputElement" :model-value="internalValue" class="p-inputnumber-input w-full"
+        v-bind="inputAttrs"
+        role="spinbutton"
+        :aria-valuenow="currentNumericValue ?? undefined"
+        :aria-valuemin="props.min ?? undefined"
+        :aria-valuemax="props.max ?? undefined"
+        v-keyfilter="{ pattern: /^[+-]?(\d*(\.\d*)?|\.\d*)([eE][+-]?\d*)?$/, validateOnly: true }"
+        @update:model-value="onUpdateModelValue"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onInputKeydown"
+        @keydown.enter="onKeydownEnter"
+        @paste="onPaste"
+      />
+      <span class="p-inputnumber-button-group">
+        <button :class="incrementButtonClass"
+          type="button"
+          :disabled="disabled || readonly || maxBoundary"
+          :tabindex="-1"
+          aria-label="Increment value"
+          @mousedown="onSpinButtonMouseDown($event, 1)"
+          @mouseleave="clearSpinTimerAndRemoveEventListeners"
+          @mouseup="clearSpinTimerAndRemoveEventListeners"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon"
+            aria-hidden="true" data-pc-section="incrementicon">
+            <path
+              d="M10.4134 9.49931C10.3148 9.49977 10.2172 9.48055 10.1262 9.44278C10.0352 9.405 9.95263 9.34942 9.88338 9.27931L6.88338 6.27931L3.88338 9.27931C3.73811 9.34946 3.57409 9.3709 3.41567 9.34044C3.25724 9.30999 3.11286 9.22926 3.00395 9.11025C2.89504 8.99124 2.82741 8.84028 2.8111 8.67978C2.79478 8.51928 2.83065 8.35781 2.91338 8.21931L6.41338 4.71931C6.55401 4.57886 6.74463 4.49997 6.94338 4.49997C7.14213 4.49997 7.33276 4.57886 7.47338 4.71931L10.9734 8.21931C11.1138 8.35994 11.1927 8.55056 11.1927 8.74931C11.1927 8.94806 11.1138 9.13868 10.9734 9.27931C10.9007 9.35315 10.8132 9.41089 10.7168 9.44879C10.6203 9.48669 10.5169 9.5039 10.4134 9.49931Z"
+              fill="currentColor"></path>
+          </svg>
+        </button>
+        <button :class="decrementButtonClass"
+          type="button"
+          :disabled="disabled || readonly || minBoundary"
+          :tabindex="-1"
+          aria-label="Decrement value"
+          @mousedown="onSpinButtonMouseDown($event, -1)"
+          @mouseleave="clearSpinTimerAndRemoveEventListeners"
+          @mouseup="clearSpinTimerAndRemoveEventListeners"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon"
+            aria-hidden="true" data-pc-section="decrementicon">
+            <path
+              d="M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z"
+              fill="currentColor"></path>
+          </svg>
+        </button>
+      </span>
+    </span>
     <label>{{ label }}</label>
   </FloatLabel>
 </template>
@@ -15,16 +57,133 @@
 <script setup lang="ts">
 import * as vue from 'vue';
 
+import * as constants from '../../common/constants.ts';
+
+defineOptions({
+  inheritAttrs: false
+});
+
 const props = defineProps<{
   modelValue: number | undefined;
   label: string;
   allowEmpty?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
 }>();
 
 const emit = defineEmits<(event: 'update:modelValue', value: number | undefined) => void>();
 
+const attrs = vue.useAttrs();
 const internalValue = vue.ref<string>('');
 const isEditing = vue.ref<boolean>(false);
+const isFocused = vue.ref<boolean>(false);
+const inputElement = vue.ref<{ $el: HTMLInputElement } | null>(null);
+const rootAttrs = vue.computed<{ class: unknown; style: unknown }>(() => ({
+  class: attrs.class,
+  style: attrs.style
+}));
+const inputAttrs = vue.computed<Record<string, unknown>>(() => {
+  const { class: _class, style: _style, ...rest } = attrs;
+
+  return rest;
+});
+const disabled = vue.computed<boolean>(() => {
+  const value = attrs.disabled;
+
+  if (value === undefined || value === false || value === 'false') {
+    return false;
+  }
+
+  return true;
+});
+const readonly = vue.computed<boolean>(() => {
+  const value = attrs.readonly;
+
+  if (value === undefined || value === false || value === 'false') {
+    return false;
+  }
+
+  return true;
+});
+const invalid = vue.computed<boolean>(() => {
+  return attrs.invalid === '' || attrs.invalid === true || attrs.invalid === 'true';
+});
+const hasValue = vue.computed<boolean>(() => {
+  return internalValue.value !== '';
+});
+const stepValue = vue.computed<number>(() => {
+  const rawStep = props.step ?? 1;
+
+  if (!Number.isFinite(rawStep) || rawStep <= 0) {
+    return 1;
+  }
+
+  return rawStep;
+});
+
+const rootClass = vue.computed<Array<string | Record<string, boolean>>>(() => {
+  return [
+    'p-inputnumber',
+    'p-component',
+    'p-inputwrapper',
+    'p-inputnumber-stacked',
+    'p-inputnumber-fluid',
+    'w-full',
+    {
+      'p-invalid': invalid.value,
+      'p-inputwrapper-filled': hasValue.value,
+      'p-inputwrapper-focus': isFocused.value
+    }
+  ];
+});
+const currentNumericValue = vue.computed<number | undefined>(() => {
+  if (internalValue.value === '') {
+    return props.modelValue;
+  }
+
+  const value = Number(internalValue.value);
+
+  return Number.isFinite(value) ? value : props.modelValue;
+});
+const inferredNumericValue = vue.computed<number>(() => {
+  const source = internalValue.value === '' ? (props.modelValue ?? props.min ?? 0) : parseFloat(internalValue.value);
+
+  return Number.isFinite(source) ? source : (props.modelValue ?? props.min ?? 0);
+});
+const activeButton = vue.ref<'increment' | 'decrement' | null>(null);
+const minBoundary = vue.computed<boolean>(() => {
+  return props.min !== undefined && inferredNumericValue.value <= props.min;
+});
+const maxBoundary = vue.computed<boolean>(() => {
+  return props.max !== undefined && inferredNumericValue.value >= props.max;
+});
+const incrementButtonClass = vue.computed<Array<string | Record<string, boolean>>>(() => {
+  const isDisabled = disabled.value || readonly.value || maxBoundary.value;
+
+  return [
+    isDisabled ? 'cursor-default' : 'cursor-pointer',
+    'p-inputnumber-button',
+    'p-inputnumber-increment-button',
+    {
+      'p-active': activeButton.value === 'increment',
+      'p-disabled': isDisabled
+    }
+  ];
+});
+const decrementButtonClass = vue.computed<Array<string | Record<string, boolean>>>(() => {
+  const isDisabled = disabled.value || readonly.value || minBoundary.value;
+
+  return [
+    isDisabled ? 'cursor-default' : 'cursor-pointer',
+    'p-inputnumber-button',
+    'p-inputnumber-decrement-button',
+    {
+      'p-active': activeButton.value === 'decrement',
+      'p-disabled': isDisabled
+    }
+  ];
+});
 
 const updateInternalValue = (value: number | undefined) => {
   internalValue.value = value !== undefined ? String(value) : '';
@@ -98,8 +257,9 @@ const onPaste = (event: ClipboardEvent) => {
   onUpdateModelValue(newValue);
 };
 
-const parseAndEmit = () => {
+const onBlur = () => {
   isEditing.value = false;
+  isFocused.value = false;
 
   if (internalValue.value === '') {
     updateInternalValue(props.modelValue);
@@ -119,16 +279,243 @@ const parseAndEmit = () => {
     return;
   }
 
-  updateInternalValue(parsedValue);
+  const clampedValue = validateValue(parsedValue);
+
+  updateInternalValue(clampedValue);
 
-  emit('update:modelValue', parsedValue);
+  emit('update:modelValue', clampedValue);
 };
 
-const onBlur = () => {
-  parseAndEmit();
+const onFocus = () => {
+  isFocused.value = true;
 };
 
 const onKeydownEnter = (event: KeyboardEvent) => {
   (event.target as HTMLInputElement).blur();
 };
+
+const onInputKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case 'ArrowUp':
+      if (spin(1)) {
+        event.preventDefault();
+      }
+
+      break;
+    case 'ArrowDown':
+      if (spin(-1)) {
+        event.preventDefault();
+      }
+
+      break;
+    case 'Home':
+      if (props.min !== undefined) {
+        isEditing.value = false;
+
+        updateInternalValue(props.min);
+
+        emit('update:modelValue', props.min);
+
+        event.preventDefault();
+      }
+
+      break;
+    case 'End':
+      if (props.max !== undefined) {
+        isEditing.value = false;
+
+        updateInternalValue(props.max);
+
+        emit('update:modelValue', props.max);
+
+        event.preventDefault();
+      }
+
+      break;
+    default:
+      break;
+  }
+};
+
+const validateValue = (value: number) => {
+  if (props.min !== undefined && value < props.min) {
+    return props.min;
+  }
+
+  if (props.max !== undefined && value > props.max) {
+    return props.max;
+  }
+
+  return value;
+};
+
+const getFractionDigits = (value: number) => {
+  const [coefficient, exponentString] = value.toString().toLowerCase().split('e');
+  const exponent = exponentString ? Number(exponentString) : 0;
+  const coefficientFractionDigits = coefficient.includes('.') ? (coefficient.split('.')[1]?.length ?? 0) : 0;
+
+  return Math.max(0, coefficientFractionDigits - exponent);
+};
+
+const addWithPrecision = (base: number, increment: number) => {
+  const precisionDigits = Math.max(getFractionDigits(base), getFractionDigits(increment), 0);
+  const maxPrecisionDigits = 15;
+  const safePrecisionDigits = Math.min(precisionDigits, maxPrecisionDigits);
+  let precision = 10 ** safePrecisionDigits;
+
+  if (!Number.isFinite(precision) || precision === 0) {
+    precision = 10 ** maxPrecisionDigits;
+  }
+
+  const rawValue = (base + increment) * precision;
+
+  if (!Number.isFinite(rawValue)) {
+    return base + increment;
+  }
+
+  const rounded = Math.round(rawValue) / precision;
+
+  if (!Number.isFinite(rounded)) {
+    return base + increment;
+  }
+
+  return rounded;
+};
+
+const spinTimer = vue.ref<number | undefined>(undefined);
+
+const spin = (direction: 1 | -1): boolean => {
+  const step = stepValue.value;
+
+  if (disabled.value || readonly.value || !Number.isFinite(step) || step <= 0) {
+    return false;
+  }
+
+  const inferredBaseValue =
+    internalValue.value === '' ? (props.modelValue ?? props.min ?? 0) : parseFloat(internalValue.value);
+  const safeCurrentValue = Number.isFinite(inferredBaseValue)
+    ? inferredBaseValue
+    : (props.modelValue ?? props.min ?? 0);
+  const nextValue = validateValue(addWithPrecision(safeCurrentValue, step * direction));
+
+  if (!Number.isFinite(nextValue) || nextValue === safeCurrentValue) {
+    return false;
+  }
+
+  isEditing.value = false;
+
+  updateInternalValue(nextValue);
+
+  emit('update:modelValue', nextValue);
+
+  return true;
+};
+
+const clearSpinTimer = () => {
+  if (spinTimer.value !== undefined) {
+    window.clearTimeout(spinTimer.value);
+
+    spinTimer.value = undefined;
+  }
+};
+
+const repeatSpin = (direction: 1 | -1, interval = constants.SPIN_INITIAL_DELAY) => {
+  if (disabled.value || readonly.value) {
+    return;
+  }
+
+  clearSpinTimer();
+
+  if (!spin(direction)) {
+    return;
+  }
+
+  spinTimer.value = window.setTimeout(() => {
+    repeatSpin(direction, constants.SPIN_REPEAT_DELAY);
+  }, interval);
+};
+
+const clearSpinTimerAndRemoveEventListeners = () => {
+  activeButton.value = null;
+
+  clearSpinTimer();
+
+  window.removeEventListener('mouseup', clearSpinTimerAndRemoveEventListeners);
+  window.removeEventListener('pointerup', clearSpinTimerAndRemoveEventListeners);
+  window.removeEventListener('blur', clearSpinTimerAndRemoveEventListeners);
+};
+
+const onSpinButtonMouseDown = (event: MouseEvent, direction: 1 | -1) => {
+  if (disabled.value || readonly.value || event.button !== 0) {
+    return;
+  }
+
+  activeButton.value = direction === 1 ? 'increment' : 'decrement';
+
+  inputElement.value?.$el.focus();
+
+  window.addEventListener('mouseup', clearSpinTimerAndRemoveEventListeners);
+  window.addEventListener('pointerup', clearSpinTimerAndRemoveEventListeners);
+  window.addEventListener('blur', clearSpinTimerAndRemoveEventListeners);
+
+  repeatSpin(direction);
+
+  event.preventDefault();
+};
+
+vue.onBeforeUnmount(() => {
+  clearSpinTimerAndRemoveEventListeners();
+});
 </script>
+
+<style scoped>
+.p-inputnumber {
+  display: inline-flex;
+  position: relative;
+}
+
+.p-inputnumber-button {
+  display: flex;
+  justify-content: center;
+  width: 1.5rem;
+  margin: 1px;
+  color: var(--p-button-text-secondary-color);
+}
+
+.p-inputnumber-button:not(.p-disabled):hover {
+  background-color: var(--p-button-text-secondary-hover-background);
+  color: var(--p-button-text-secondary-color);
+}
+
+.p-inputnumber-button.p-active:not(.p-disabled) {
+  background-color: var(--p-button-text-secondary-active-background);
+  color: var(--p-button-text-secondary-active-color);
+}
+
+.p-inputnumber-button-group > button:first-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 0;
+}
+
+.p-inputnumber-button-group > button:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 5px;
+}
+
+.p-inputnumber-input {
+  padding-right: 1.5rem;
+}
+
+.p-inputnumber-stacked .p-inputnumber-button-group {
+  position: absolute;
+  inset-inline-end: 0;
+  height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.p-inputnumber-button-group > button {
+  min-height: 0;
+}
+</style>
diff --git a/src/renderer/src/components/widgets/InputWidget.vue b/src/renderer/src/components/widgets/InputWidget.vue
index 7607438f..e0e3824b 100644
--- a/src/renderer/src/components/widgets/InputWidget.vue
+++ b/src/renderer/src/components/widgets/InputWidget.vue
@@ -15,6 +15,9 @@
   <div v-else>
     <InputScientificNumber v-model="value"
       :label="name"
+      :min="minimumValue"
+      :max="maximumValue"
+      :step="compStepValue"
       size="small"
       @update:model-value="inputTextValueUpdated"
     />
@@ -98,17 +101,7 @@ const selectChange = (event: ISelectChangeEvent) => {
 
 const inputTextValueUpdated = (newValue: number | undefined) => {
   if (newValue !== undefined && newValue !== oldValue) {
-    let constrainedValue = newValue;
-
-    if (props.minimumValue !== undefined && constrainedValue < props.minimumValue) {
-      constrainedValue = props.minimumValue;
-    }
-
-    if (props.maximumValue !== undefined && constrainedValue > props.maximumValue) {
-      constrainedValue = props.maximumValue;
-    }
-
-    emitChange(constrainedValue);
+    emitChange(newValue);
   }
 };