feat(web/dialog): add slider input type (#69)

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

@@ -0,0 +1,51 @@
+import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { ISlider } from "../../../interfaces/dialog";
+
+interface Props {
+  row: ISlider;
+  index: number;
+  handleChange: (value: number, index: number) => void;
+}
+
+const SliderField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if(props.row.default) props.handleChange(props.row.default, props.index);
+  }, []);
+
+  const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
+
+  return (
+    <>
+      <Box mb={3} key={`slider-${props.index}`}>
+        <Text>{props.row.label}</Text>
+        <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}
+        >
+          <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;