fix: slider answer logic

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -1,11 +1,16 @@
 import { useEffect, useState } from "react";
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import ButtonsOptions from "../ButtonsOptions";
+import { useDebouncedCallback } from "use-debounce";
+
 import CustomNumberField from "@ui_kit/CustomNumberField";
+
+import ButtonsOptions from "../ButtonsOptions";
 import SwitchSlider from "./switchSlider";
-import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
+
 import { updateQuestion } from "@root/questions/actions";
 
+import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
+
 interface Props {
   question: QuizQuestionNumber;
 }
@@ -19,14 +24,31 @@ export default function SliderOptions({ question }: Props) {
   const [startError, setStartError] = useState<boolean>(false);
   const [minError, setMinError] = useState<boolean>(false);
   const [maxError, setMaxError] = useState<boolean>(false);
+  const startValueDebounce = useDebouncedCallback((value) => {
+    updateQuestion(question.id, (question) => {
+      if (question.type !== "number") return;
+
+      question.content.start = value;
+    });
+  }, 2000);
 
   useEffect(() => {
     const min = Number(question.content.range.split("—")[0]);
     const max = Number(question.content.range.split("—")[1]);
     const start = Number(question.content.start);
 
-    if (start < min || start > max) {
+    if (start < min) {
       setStartError(true);
+      startValueDebounce(min);
+
+      return;
+    }
+
+    if (start > max && min < max) {
+      setStartError(true);
+      startValueDebounce(max);
+
+      return;
     }
 
     if (start >= min && start <= max) {
@@ -211,7 +233,11 @@ export default function SliderOptions({ question }: Props) {
               placeholder={"1"}
               error={stepError}
               value={String(question.content.step)}
-              onChange={({ target }) => {
+              onChange={({ target, type }) => {
+                if (type === "blur") {
+                  return;
+                }
+
                 updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;