fix: min max value

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -17,12 +17,13 @@ export default function SliderOptions({ question }: Props) {
   const [switchState, setSwitchState] = useState("setting");
   const [stepError, setStepError] = useState("");
   const [startError, setStartError] = useState<boolean>(false);
+  const [minError, setMinError] = useState<boolean>(false);
+  const [maxError, setMaxError] = useState<boolean>(false);
 
   useEffect(() => {
     const min = Number(question.content.range.split("—")[0]);
     const max = Number(question.content.range.split("—")[1]);
     const start = Number(question.content.start);
-    console.log(min, max, start);
 
     if (start < min || start > max) {
       setStartError(true);
@@ -79,7 +80,11 @@ export default function SliderOptions({ question }: Props) {
               min={0}
               max={99999999999}
               value={question.content.range.split("—")[0]}
+              emptyError={minError}
               onChange={({ target }) => {
+                const min = Number(target.value);
+                const max = Number(question.content.range.split("—")[1]);
+
                 updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
 
@@ -87,19 +92,12 @@ export default function SliderOptions({ question }: Props) {
                     question.content.range.split("—")[1]
                   }`;
                 });
-              }}
-              onBlur={({ target }) => {
-                const min = Number(target.value);
-                const max = Number(question.content.range.split("—")[1]);
 
                 if (min >= max) {
-                  updateQuestion(question.id, (question) => {
+                  setMinError(true);
-                    if (question.type !== "number") return;
+                } else {
-
+                  setMinError(false);
-                    question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${
+                  setMaxError(false);
-                      question.content.range.split("—")[1]
-                    }`;
-                  });
                 }
               }}
             />
@@ -110,7 +108,11 @@ export default function SliderOptions({ question }: Props) {
               min={0}
               max={100000000000}
               value={question.content.range.split("—")[1]}
+              emptyError={maxError}
               onChange={({ target }) => {
+                const min = Number(question.content.range.split("—")[0]);
+                const max = Number(target.value);
+
                 updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
 
@@ -118,6 +120,13 @@ export default function SliderOptions({ question }: Props) {
                     question.content.range.split("—")[0]
                   }—${target.value}`;
                 });
+
+                if (max <= min) {
+                  setMaxError(true);
+                } else {
+                  setMaxError(false);
+                  setMinError(false);
+                }
               }}
               onBlur={({ target }) => {
                 const step = question.content.step;
@@ -125,16 +134,6 @@ export default function SliderOptions({ question }: Props) {
                 const max = Number(target.value);
                 const range = max - min;
 
-                if (max <= min) {
-                  updateQuestion(question.id, (question) => {
-                    if (question.type !== "number") return;
-
-                    question.content.range = `${min}—${
-                      min + 1 >= 100 ? 100 : min + 1
-                    }`;
-                  });
-                }
-
                 if (step > max) {
                   updateQuestion(question.id, (question) => {
                     if (question.type !== "number") return;
@@ -179,8 +178,6 @@ export default function SliderOptions({ question }: Props) {
             <CustomNumberField
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"50"}
-              min={Number(question.content.range.split("—")[0])}
-              max={Number(question.content.range.split("—")[1])}
               value={String(question.content.start)}
               emptyError={startError}
               onChange={({ target }) => {

src/ui_kit/CustomNumberField.tsx

@@ -36,11 +36,24 @@ export default function CustomNumberField({
       inputValue.match(/^\d*$/) ||
       (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/))
     ) {
-      console.log("inputValue", inputValue);
       onChange?.({ ...event, target: { ...event.target, value: inputValue } });
     }
   };
 
+  const onInputBlur = (event: FocusEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+
+    if (Number(inputValue) < min) {
+      onChange?.({ ...event, target: { ...event.target, value: String(min) } });
+    }
+
+    if (Number(inputValue) > max) {
+      onChange?.({ ...event, target: { ...event.target, value: String(max) } });
+    }
+
+    onBlur?.(event);
+  };
+
   return (
     <CustomTextField
       placeholder={placeholder}
@@ -49,7 +62,7 @@ export default function CustomNumberField({
       emptyError={emptyError}
       onChange={onInputChange}
       onKeyDown={onKeyDown}
-      onBlur={onBlur}
+      onBlur={onInputBlur}
       value={value}
     />
   );