diff --git a/src/assets/icons/CloseBold.tsx b/src/assets/icons/CloseBold.tsx
new file mode 100644
index 00000000..1d4be921
--- /dev/null
+++ b/src/assets/icons/CloseBold.tsx
@@ -0,0 +1,36 @@
+import { useTheme } from "@mui/material";
+
+
+interface Props {
+ width?: number;
+}
+
+export default function CloseBold({ width }: Props) {
+ const theme = useTheme();
+
+ return (
+
+ )}
diff --git a/src/assets/icons/questionsPage/StarIconMini.tsx b/src/assets/icons/questionsPage/StarIconMini.tsx
index 96a7a2b1..19cde6cd 100644
--- a/src/assets/icons/questionsPage/StarIconMini.tsx
+++ b/src/assets/icons/questionsPage/StarIconMini.tsx
@@ -12,7 +12,7 @@ export default function StarIconMini({ color, width = 30, sx }: Props) {
return (
-
);
diff --git a/src/pages/ViewPublicationPage/questions/Number.tsx b/src/pages/ViewPublicationPage/questions/Number.tsx
index 6181161f..b1ed09e5 100644
--- a/src/pages/ViewPublicationPage/questions/Number.tsx
+++ b/src/pages/ViewPublicationPage/questions/Number.tsx
@@ -7,6 +7,7 @@ import CustomTextField from "@ui_kit/CustomTextField";
import { useQuizViewStore, updateAnswer } from "@root/quizView";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
+import {CustomSlider} from "@ui_kit/CustomSlider";
type NumberProps = {
currentQuestion: QuizQuestionNumber;
@@ -74,10 +75,11 @@ export const Number = ({ currentQuestion }: NumberProps) => {
flexDirection: "column",
width: "100%",
marginTop: "20px",
+ gap: "30px"
}}
>
- 1
@@ -88,36 +90,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
min={min}
max={max}
step={currentQuestion.content.step || 1}
- sx={{
- color: theme.palette.brightPurple.main,
- padding: "0",
- marginTop: "75px",
- "& .MuiSlider-valueLabel":{
- background: theme.palette.brightPurple.main,
- borderRadius: "8px",
- width: "60px",
- height: "36px"
- },
- "& .MuiSlider-valueLabel::before": {
- width: "6px",
- height: "2px",
- transform: "translate(-50%, 50%) rotate(90deg)",
- bottom: "-5px"
- },
- "& .MuiSlider-rail": {
- backgroundColor: "#F2F3F7",
- border: `1px solid #9A9AAF`,
- height: "12px"
- },
- "& .MuiSlider-thumb": {
- border: "3px #f2f3f7 solid",
- height: "23px",
- width: "23px"
- },
- "& .MuiSlider-track": {
- height: "12px"
- }
- }}
onChange={(_, value) => {
const range = String(value).replace(",", "—");
updateAnswer(currentQuestion.content.id, range);
@@ -158,6 +130,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
sx={{
display: "flex",
gap: "15px",
+ alignItems: "center",
"& .MuiFormControl-root": { width: "auto" },
}}
>
@@ -180,9 +153,9 @@ export const Number = ({ currentQuestion }: NumberProps) => {
"& .MuiInputBase-input": { textAlign: "center" },
}}
/>
-
- до
-
+
+ до
+
{
onChange={(_, value) =>
updateAnswer(currentQuestion.content.id, String(value))
}
- sx={{ height: "50px" }}
+ sx={{ height: "50px", gap: "15px" }}
max={currentQuestion.content.steps}
icon={
void;
+ onChange?: (_: Event, value: number | number[]) => void;
+ onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
};
export const CustomSlider = ({
@@ -16,13 +17,15 @@ export const CustomSlider = ({
max = 100,
step,
onChange,
+ onChangeCommitted
}: CustomSliderProps) => {
- const handleChange = ({ type }: Event, newValue: number | number[]) => {
- // Для корректной работы слайдера в FireFox
- if (type !== "change") {
- onChange?.(newValue);
- }
- };
+ // const handleChange = ({ type }: Event, newValue: number | number[]) => {
+ // // Для корректной работы слайдера в FireFox
+ // if (type !== "change") {
+ // onChange?.(e, newValue);
+ // }
+ // };
+ const theme = useTheme();
return (
e.stopPropagation()}
data-cy="slider"
sx={{
- color: "#7E2AEA",
- height: "12px",
- "& .MuiSlider-track": {
- border: "none",
+ color: theme.palette.brightPurple.main,
+ padding: "0",
+ marginTop: "75px",
+ "& .MuiSlider-valueLabel":{
+ background: theme.palette.brightPurple.main,
+ borderRadius: "8px",
+ width: "60px",
+ height: "36px"
+ },
+ "& .MuiSlider-valueLabel::before": {
+ width: "6px",
+ height: "2px",
+ transform: "translate(-50%, 50%) rotate(90deg)",
+ bottom: "-5px"
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`,
+ height: "12px"
},
"& .MuiSlider-thumb": {
- height: 32,
- width: 32,
- border: `6px solid "#7E2AEA`,
- backgroundColor: "white",
- boxShadow: `0px 0px 0px 3px white,
- 0px 4px 4px 3px #C3C8DD`,
- "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
- boxShadow: `0px 0px 0px 3px white,
- 0px 4px 4px 3px #C3C8DD`,
- },
+ border: "3px #f2f3f7 solid",
+ height: "23px",
+ width: "23px"
},
+ "& .MuiSlider-track": {
+ height: "12px"
+ }
}}
/>
);
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
index e9a5dde5..ddd2018e 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
@@ -40,10 +40,13 @@ export default function Number({ question }: Props) {
>
setSliderValues(value)}
+ onChange={(e, value) => {
+ setSliderValues(value);
+ }}
min={min}
max={max}
defaultValue={start}
+ valueLabelDisplay={"on"}
step={question.content.step}
/>