slider update

client/src/Components/v2/inputs/Slider.tsx

@@ -1,69 +1,88 @@
+import Typography from "@mui/material/Typography";
 import { forwardRef } from "react";
 import Slider from "@mui/material/Slider";
 import type { SliderProps } from "@mui/material/Slider";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
+import Box from "@mui/material/Box";
+import type { ResponsiveStyleValue } from "@mui/system";
 
-export const SliderInput = forwardRef<HTMLSpanElement, SliderProps>(function SliderInput(
-	{ sx, ...props },
-	ref
-) {
-	const theme = useTheme();
-	const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
+interface SliderInputProps extends SliderProps {
+	sx?: SliderProps["sx"];
+	showValue?: boolean;
+}
 
-	return (
-		<Slider
-			{...props}
-			ref={ref}
-			sx={[
-				{
-					"& .MuiSlider-track": {
-						backgroundColor: theme.palette.primary.main,
-						border: "none",
-					},
-					"& .MuiSlider-rail": {
-						backgroundColor: theme.palette.grey[300],
-						opacity: 1,
-					},
-					"& .MuiSlider-thumb": {
-						backgroundColor: "#fff",
-						"&:hover, &.Mui-focusVisible": {
-							boxShadow: `0 0 0 8px ${theme.palette.primary.main}20`,
+export const SliderInput = forwardRef<HTMLSpanElement, SliderInputProps>(
+	({ sx, showValue = false, ...props }, ref) => {
+		const theme = useTheme();
+		const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
+
+		return (
+			<Stack
+				gap={theme.spacing(8)}
+				direction={"row"}
+				alignItems={"center"}
+			>
+				{showValue && <Typography>{props.value}</Typography>}
+				<Slider
+					{...props}
+					ref={ref}
+					sx={[
+						{
+							"& .MuiSlider-track": {
+								backgroundColor: theme.palette.primary.main,
+								border: "none",
+							},
+							"& .MuiSlider-rail": {
+								backgroundColor: theme.palette.grey[300],
+								opacity: 1,
+							},
+							"& .MuiSlider-thumb": {
+								backgroundColor: "#fff",
+								"&:hover, &.Mui-focusVisible": {
+									boxShadow: `0 0 0 8px ${theme.palette.primary.main}20`,
+								},
+							},
+							"& .MuiSlider-valueLabel": {
+								backgroundColor: theme.palette.primary.main,
+							},
 						},
-					},
-					"& .MuiSlider-valueLabel": {
-						backgroundColor: theme.palette.primary.main,
-					},
-				},
-				...additionalSx,
-			]}
-		/>
-	);
-});
+						...additionalSx,
+					]}
+				/>
+			</Stack>
+		);
+	}
+);
 
 interface SliderWithLabelProps extends SliderProps {
 	fieldLabel?: string;
 	required?: boolean;
 	showValue?: boolean;
-	valueSuffix?: string;
+	sliderMaxWidth?: ResponsiveStyleValue<number | string>;
 }
 
 export const SliderWithLabel = forwardRef<HTMLSpanElement, SliderWithLabelProps>(
-	function SliderWithLabel(
-		{ fieldLabel, required, showValue = true, valueSuffix = "", value, ...props },
+	(
+		{ fieldLabel, required, showValue = true, value, sliderMaxWidth = "100%", ...props },
 		ref
-	) {
+	) => {
 		const theme = useTheme();
 
-		const labelText = showValue && value !== undefined
-			? `${fieldLabel}: ${value}${valueSuffix}`
-			: fieldLabel;
+		const labelText = fieldLabel;
 
 		return (
 			<Stack spacing={theme.spacing(2)}>
 				{fieldLabel && <FieldLabel required={required}>{labelText}</FieldLabel>}
-				<SliderInput {...props} value={value} ref={ref} />
+				<Box maxWidth={sliderMaxWidth}>
+					<SliderInput
+						{...props}
+						showValue={showValue}
+						value={value}
+						ref={ref}
+					/>
+				</Box>
 			</Stack>
 		);
 	}

client/src/Pages/CreateMonitor/index.tsx

@@ -374,6 +374,7 @@ const CreateMonitorPage = () => {
 							render={({ field }) => (
 								<SliderWithLabel
 									{...field}
+									sliderMaxWidth={{ xs: "100%", md: "50%" }}
 									fieldLabel={t("pages.createMonitor.form.incidents.option.checks.label")}
 									min={1}
 									max={25}
@@ -387,10 +388,10 @@ const CreateMonitorPage = () => {
 							render={({ field }) => (
 								<SliderWithLabel
 									{...field}
+									sliderMaxWidth={{ xs: "100%", md: "50%" }}
 									fieldLabel={t(
 										"pages.createMonitor.form.incidents.option.percentage.label"
 									)}
-									valueSuffix="%"
 									min={1}
 									max={100}
 									valueLabelDisplay="auto"