Fixes bug with SliderTablefield control

This fixes a bug where the SliderTableField's slider was not changing the input's value.

We essentially let the parent component control the value so the component is only ever reading from props, instead of using its stored state as a display.

components/common/SliderTableField/index.tsx

@@ -3,8 +3,6 @@ import Input from '~components/common/Input'
 import Slider from '~components/common/Slider'
 import TableField from '~components/common/TableField'
 
-import styles from './index.module.scss'
-
 interface Props {
   name: string
   label: string
@@ -26,12 +24,9 @@ const SliderTableField = (props: Props) => {
   const [value, setValue] = useState(props.value)
 
   useEffect(() => {
-    if (props.value !== undefined && props.value !== value)
-      setValue(props.value)
-  }, [props.value])
-
-  useEffect(() => {
-    if (value !== undefined && value !== props.value) props.onValueChange(value)
+    if (value !== undefined && value !== props.value) {
+      props.onValueChange(value)
+    }
   }, [value])
 
   function handleValueCommit(value: number[]) {
@@ -58,7 +53,7 @@ const SliderTableField = (props: Props) => {
         min={props.min}
         max={props.max}
         step={props.step}
-        value={[value ? value : 0]}
+        value={[props.value ? props.value : 0]}
         onValueChange={handleValueChange}
         onValueCommit={handleValueCommit}
       />
@@ -66,7 +61,7 @@ const SliderTableField = (props: Props) => {
         className="number"
         bound={true}
         type="number"
-        value={`${value}`}
+        value={`${props.value}`}
         min={props.min}
         max={props.max}
         step={props.step}