diff --git a/gui/src/components/Img2Img.tsx b/gui/src/components/Img2Img.tsx
index 09129942..9291b72c 100644
--- a/gui/src/components/Img2Img.tsx
+++ b/gui/src/components/Img2Img.tsx
@@ -80,10 +80,11 @@ export function Img2Img(props: Img2ImgProps) {
         setParams(newParams);
       }} />
       <NumericField
+        decimal
         label='Width'
         min={0}
         max={1}
-        step='any'
+        step={0.1}
         value={strength}
         onChange={(value) => {
           setStrength(value);
diff --git a/gui/src/components/NumericField.tsx b/gui/src/components/NumericField.tsx
index d089a499..7656ffdb 100644
--- a/gui/src/components/NumericField.tsx
+++ b/gui/src/components/NumericField.tsx
@@ -2,7 +2,16 @@ import { doesExist } from '@apextoaster/js-utils';
 import { TextField } from '@mui/material';
 import * as React from 'react';
 
+export function parseNumber(num: string, decimal=false): number {
+  if (decimal) {
+    return parseFloat(num);
+  } else {
+    return parseInt(num, 10);
+  }
+}
+
 export interface ImageControlProps {
+  decimal?: boolean;
   label: string;
   min: number;
   max: number;
@@ -22,7 +31,7 @@ export function NumericField(props: ImageControlProps) {
     value={value}
     onChange={(event) => {
       if (doesExist(props.onChange)) {
-        props.onChange(parseInt(event.target.value, 10));
+        props.onChange(parseNumber(event.target.value, props.decimal));
       }
     }}
   />;