frontend: remote states from slider component

frontend/src/App.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useReducer } from 'react';
 import { Component, ComponentLabel } from './components/component';
 import { ButtonComponent } from './components/ButtonComponent';
-import { socket } from './socket';
 import { NumberComponent } from './components/NumberComponent';
 import { SliderComponent } from './components/SliderComponent';
 import { EnumComponent } from './components/EnumComponent';
+import { socket } from './socket';
 
 type AttributeType =
   | 'str'

frontend/src/components/SliderComponent.tsx

@@ -1,15 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import {
+import { InputGroup, Form, Row, Col, Button, Collapse } from 'react-bootstrap';
-  OverlayTrigger,
-  Badge,
-  Tooltip,
-  InputGroup,
-  Form,
-  Row,
-  Col,
-  Button,
-  Collapse
-} from 'react-bootstrap';
 import { socket } from '../socket';
 import RangeSlider from 'react-bootstrap-range-slider';
 import { DocStringComponent } from './DocStringComponent';
@@ -33,10 +23,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     renderCount.current++;
   });
 
-  const { name, parent_path, value, readOnly, docString } = props;
+  const { name, parent_path, value, min, max, stepSize, readOnly, docString } = props;
-  const [min, setMin] = useState(props.min);
-  const [max, setMax] = useState(props.max);
-  const [stepSize, setStepSize] = useState(props.stepSize);
 
   const socketEmit = (
     newNumber: number,
@@ -56,18 +43,17 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const handleValueChange = (newValue: number, valueType: string) => {
     switch (valueType) {
       case 'min':
-        setMin(newValue);
+        socketEmit(value, newValue, max, stepSize);
         break;
       case 'max':
-        setMax(newValue);
+        socketEmit(value, min, newValue, stepSize);
         break;
       case 'stepSize':
-        setStepSize(newValue);
+        socketEmit(value, min, max, newValue);
         break;
       default:
         break;
     }
-    socketEmit(value, min, max, stepSize);
   };
 
   return (