From c3a8184431eb82aeb900a080453622c781d9e0f4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jul 2024 10:10:11 +1000
Subject: [PATCH] feat(ui): add number input to scale slider

---
 .../UpscaleScaleSlider.tsx                    | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx
index 74696e99da..385add771a 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleScaleSlider.tsx
@@ -1,12 +1,12 @@
-import { CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { scaleChanged } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const marks = [2, 4, 8, 16];
+const marks = [2, 4, 8];
 
-const formatValue = (val: number) => `${val}x`;
+const formatValue = (val: string | number) => `${val}x`;
 
 export const UpscaleScaleSlider = memo(() => {
   const dispatch = useAppDispatch();
@@ -23,15 +23,26 @@ export const UpscaleScaleSlider = memo(() => {
   return (
     <FormControl orientation="vertical" gap={0}>
       <FormLabel m={0}>{t('upscaling.scale')}</FormLabel>
-      <CompositeSlider
-        min={2}
-        max={16}
-        value={scale}
-        onChange={onChange}
-        marks={marks}
-        formatValue={formatValue}
-        withThumbTooltip
-      />
+      <Flex w="full" gap={4}>
+        <CompositeSlider
+          min={2}
+          max={8}
+          value={scale}
+          onChange={onChange}
+          marks={marks}
+          formatValue={formatValue}
+          defaultValue={4}
+        />
+        <CompositeNumberInput
+          maxW={20}
+          value={scale}
+          onChange={onChange}
+          defaultValue={4}
+          min={2}
+          max={16}
+          format={formatValue}
+        />
+      </Flex>
     </FormControl>
   );
 });