From 914f8929ed21676d855264ff3be2a2a486cfbaf8 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 17 Mar 2023 20:07:22 -0700
Subject: [PATCH] Implement SliderTableField

---
 components/SliderTableField/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/SliderTableField/index.tsx b/components/SliderTableField/index.tsx
index ff2409d2..07f86ff1 100644
--- a/components/SliderTableField/index.tsx
+++ b/components/SliderTableField/index.tsx
@@ -21,11 +21,11 @@ interface Props {
 }
 
 const SliderTableField = (props: Props) => {
-  const [value, setValue] = useState(props.value)
+  const [value, setValue] = useState(0)
 
   useEffect(() => {
     if (props.value !== undefined && props.value !== value)
-      setValue(props.value)
+    if (props.value) setValue(props.value)
   }, [props.value])
 
   useEffect(() => {
@@ -40,10 +40,14 @@ const SliderTableField = (props: Props) => {
     setValue(value[0])
   }
 
-  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
     setValue(parseInt(event.currentTarget?.value))
   }
 
+  function onValueChange(value: number[]) {
+    setValue(value[0])
+  }
+
   return (
     <TableField
       name={props.name}
@@ -58,8 +62,8 @@ const SliderTableField = (props: Props) => {
         min={props.min}
         max={props.max}
         step={props.step}
-        value={[value ? value : 0]}
-        onValueChange={handleValueChange}
+        value={[value]}
+        onValueChange={onValueChange}
         onValueCommit={handleValueCommit}
       />
       <Input
@@ -69,7 +73,7 @@ const SliderTableField = (props: Props) => {
         min={props.min}
         max={props.max}
         step={props.step}
-        onChange={handleInputChange}
+        onChange={onInputChange}
       />
     </TableField>
   )