fix: SliderOptions from logic

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -52,6 +52,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                 });
               }}
               onBlur={({ target }) => {
+                const start = listQuestions[quizId][totalIndex].content.start;
                 const min = Number(target.value);
                 const max = Number(
                   listQuestions[quizId][totalIndex].content.range.split("—")[1]
@@ -68,6 +69,15 @@ export default function SliderOptions({ totalIndex }: Props) {
                     content: clonContent,
                   });
                 }
+
+                if (start < min) {
+                  updateQuestionsList(quizId, totalIndex, {
+                    content: {
+                      ...listQuestions[quizId][totalIndex].content,
+                      start: min,
+                    },
+                  });
+                }
               }}
             />
             <Typography>—</Typography>
@@ -88,10 +98,13 @@ export default function SliderOptions({ totalIndex }: Props) {
                 });
               }}
               onBlur={({ target }) => {
+                const start = listQuestions[quizId][totalIndex].content.start;
+                const step = listQuestions[quizId][totalIndex].content.step;
                 const min = Number(
                   listQuestions[quizId][totalIndex].content.range.split("—")[0]
                 );
                 const max = Number(target.value);
+                const range = max - min;
 
                 if (max <= min) {
                   const clonContent = listQuestions[quizId][totalIndex].content;
@@ -104,6 +117,34 @@ export default function SliderOptions({ totalIndex }: Props) {
                     content: clonContent,
                   });
                 }
+
+                if (start > max) {
+                  updateQuestionsList(quizId, totalIndex, {
+                    content: {
+                      ...listQuestions[quizId][totalIndex].content,
+                      start: max,
+                    },
+                  });
+                }
+
+                if (step > max) {
+                  updateQuestionsList(quizId, totalIndex, {
+                    content: {
+                      ...listQuestions[quizId][totalIndex].content,
+                      step: max,
+                    },
+                  });
+
+                  if (range % step) {
+                    setStepError(
+                      `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
+                        max - min
+                      }`
+                    );
+                  } else {
+                    setStepError("");
+                  }
+                }
               }}
             />
           </Box>
@@ -120,7 +161,12 @@ export default function SliderOptions({ totalIndex }: Props) {
             <Typography>Начальное значение</Typography>
             <CustomNumberField
               placeholder={"50"}
-              min={0}
+              min={Number(
+                listQuestions[quizId][totalIndex].content.range.split("—")[0]
+              )}
+              max={Number(
+                listQuestions[quizId][totalIndex].content.range.split("—")[1]
+              )}
               value={String(listQuestions[quizId][totalIndex].content.start)}
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
@@ -129,21 +175,6 @@ export default function SliderOptions({ totalIndex }: Props) {
                   content: clonContent,
                 });
               }}
-              onBlur={({ target }) => {
-                const start = Number(target.value);
-                const min = Number(
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
-                );
-
-                if (start < min) {
-                  updateQuestionsList(quizId, totalIndex, {
-                    content: {
-                      ...listQuestions[quizId][totalIndex].content,
-                      start: min,
-                    },
-                  });
-                }
-              }}
             />
           </Box>
           <Box sx={{ width: "100%" }}>

src/ui_kit/CustomNumberField.tsx

@@ -30,16 +30,28 @@ export default function CustomNumberField({
     const inputValue = event.target.value;
 
     if (
-      Number(inputValue) >= min &&
+      inputValue === "" ||
-      Number(inputValue) <= max &&
+      inputValue.match(/^\d*$/) ||
-      (inputValue === "" ||
+      (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/))
-        inputValue.match(/^\d*$/) ||
-        (inputValue[0] === "-" && inputValue.slice(1).match(/^\d*$/)))
     ) {
       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}
@@ -47,7 +59,7 @@ export default function CustomNumberField({
       error={error}
       onChange={onInputChange}
       onKeyDown={onKeyDown}
-      onBlur={onBlur}
+      onBlur={onInputBlur}
       value={value}
     />
   );