slider question preview supports range

src/ui_kit/CustomSlider.tsx

@@ -2,7 +2,7 @@ import { Slider } from "@mui/material";
 
 type CustomSliderProps = {
     defaultValue?: number;
-    value?: number;
+    value?: number | number[];
     min?: number;
     max?: number;
     step?: number;

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import { CustomSlider } from "@ui_kit/CustomSlider";
 import { QuizQuestionNumber } from "model/questionTypes/number";
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 
 interface Props {
@@ -9,7 +9,19 @@ interface Props {
 }
 
 export default function Number({ question }: Props) {
-    const [sliderValue, setSliderValue] = useState<number>(question.content.start);
+    const [sliderValues, setSliderValues] = useState<number | number[]>(0);
+
+    const start = question.content.start;
+    const min = parseInt(question.content.range.split("—")[0]);
+    const max = parseInt(question.content.range.split("—")[1]);
+
+    useLayoutEffect(() => {
+        if (question.content.chooseRange) {
+            setSliderValues([start, start + (max - start) / 2]);
+        } else {
+            setSliderValues(start);
+        }
+    }, [max, question.content.chooseRange, start]);
 
     return (
         <Box sx={{
@@ -22,11 +34,11 @@ export default function Number({ question }: Props) {
                 px: 2,
             }}>
                 <CustomSlider
-                    value={sliderValue}
+                    value={sliderValues}
-                    onChange={v => setSliderValue(v as number)}
+                    onChange={value => setSliderValues(value)}
-                    min={parseInt(question.content.range.split("—")[0])}
+                    min={min}
-                    max={parseInt(question.content.range.split("—")[1])}
+                    max={max}
-                    defaultValue={question.content.start}
+                    defaultValue={start}
                     step={question.content.step}
                 />
             </Box>