feat(gui): add sliders to numeric inputs

ssube · Jan 8, 2023 · c5e0439 · c5e0439
1 parent d5c4040
commit c5e0439
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/gui/src/components/Img2Img.tsx b/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);

diff --git a/gui/src/components/NumericField.tsx b/gui/src/components/NumericField.tsx
@@ -1,8 +1,8 @@
 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 {
+export function parseNumber(num: string, decimal = false): number {
   if (decimal) {
     return parseFloat(num);
   } else {
@@ -15,24 +15,41 @@ 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
-    label={label}
-    variant='outlined'
-    type='number'
-    inputProps={{ min, max, step }}
-    value={value}
-    onChange={(event) => {
-      if (doesExist(props.onChange)) {
-        props.onChange(parseNumber(event.target.value, props.decimal));
-      }
-    }}
-  />;
+  const { decimal, label, min, max, step, value } = props;
+  return <Stack spacing={2}>
+    <TextField
+      label={label}
+      variant='outlined'
+      type='number'
+      inputProps={{ min, max, step }}
+      value={value}
+      onChange={(event) => {
+        if (doesExist(props.onChange)) {
+          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>;
 }