feat(gui): add sliders to numeric inputs

gui/src/components/Img2Img.tsx

@@ -81,10 +81,10 @@ export function Img2Img(props: Img2ImgProps) {
       }} />
       <NumericField
         decimal
-        label='Width'
+        label='Weight'
         min={0}
         max={1}
-        step={0.1}
+        step={0.01}
         value={strength}
         onChange={(value) => {
           setStrength(value);

gui/src/components/NumericField.tsx

@@ -1,5 +1,5 @@
 import { doesExist } from '@apextoaster/js-utils';
-import { TextField } from '@mui/material';
+import { Slider, Stack, TextField } from '@mui/material';
 import * as React from 'react';
 
 export function parseNumber(num: string, decimal = false): number {
@@ -15,15 +15,16 @@ export interface ImageControlProps {
   label: string;
   min: number;
   max: number;
-  step: number | 'any';
+  step: number;
   value: number;
 
   onChange?: (value: number) => void;
 }
 
 export function NumericField(props: ImageControlProps) {
-  const { label, min, max, step, value } = props;
-  return <TextField
+  const { decimal, label, min, max, step, value } = props;
+  return <Stack spacing={2}>
+    <TextField
       label={label}
       variant='outlined'
       type='number'
@@ -31,8 +32,24 @@ export function NumericField(props: ImageControlProps) {
       value={value}
       onChange={(event) => {
         if (doesExist(props.onChange)) {
-        props.onChange(parseNumber(event.target.value, props.decimal));
+          props.onChange(parseNumber(event.target.value, decimal));
         }
       }}
-  />;
+    />
+    <Slider
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      onChange={(_event, newValue) => {
+        if (doesExist(props.onChange)) {
+          if (Array.isArray(newValue)) {
+            props.onChange(newValue[0]);
+          } else {
+            props.onChange(newValue);
+          }
+        }
+      }}
+    />
+  </Stack>;
 }