refactor(web/input): move field components into fields folder

web/src/features/dialog/components/fields/slider.tsx

@@ -0,0 +1,48 @@
+import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { ISlider } from '../../../../interfaces/dialog';
+import Label from '../Label';
+
+interface Props {
+  row: ISlider;
+  index: number;
+  handleChange: (value: number, index: number) => void;
+}
+
+const SliderField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if (props.row.default || props.row.min) props.handleChange(props.row.default || props.row.min!, props.index);
+  }, []);
+
+  const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
+
+  return (
+    <>
+      <Box mb={3} key={`slider-${props.index}`}>
+        <Label label={props.row.label} description={props.row.description} />
+        <Slider
+          onChangeEnd={(val: number) => props.handleChange(val, props.index)}
+          onChange={(val: number) => setSliderValue(val)}
+          defaultValue={props.row.default || props.row.min || 0}
+          min={props.row.min}
+          max={props.row.max}
+          step={props.row.step}
+          isDisabled={props.row.disabled}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <Tooltip hasArrow label={sliderValue} placement="bottom" gutter={10}>
+            <SliderThumb />
+          </Tooltip>
+        </Slider>
+        <HStack justifyContent="space-between">
+          <Text fontSize="sm">{props.row.min || 0}</Text>
+          <Text fontSize="sm">{props.row.max || 100}</Text>
+        </HStack>
+      </Box>
+    </>
+  );
+};
+
+export default SliderField;