From f6971ede691879bc45bbbcb1860c2092d139137d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 30 Jan 2026 00:00:12 +0000
Subject: [PATCH] slider w label

---
 client/src/Components/v2/inputs/Slider.tsx | 89 ++++++++++++++--------
 client/src/Pages/CreateMonitor/index.tsx   | 43 +++++------
 2 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/client/src/Components/v2/inputs/Slider.tsx b/client/src/Components/v2/inputs/Slider.tsx
index 11b3e8db8..5da704783 100644
--- a/client/src/Components/v2/inputs/Slider.tsx
+++ b/client/src/Components/v2/inputs/Slider.tsx
@@ -2,40 +2,69 @@ 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";
 
-export const SliderInput = forwardRef<HTMLSpanElement, SliderProps>(
-	function SliderInput({ sx, ...props }, ref) {
-		const theme = useTheme();
-		const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
+export const SliderInput = forwardRef<HTMLSpanElement, SliderProps>(function SliderInput(
+	{ sx, ...props },
+	ref
+) {
+	const theme = useTheme();
+	const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
 
-		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",
-							border: `2px solid ${theme.palette.primary.main}`,
-							"&:hover, &.Mui-focusVisible": {
-								boxShadow: `0 0 0 8px ${theme.palette.primary.main}20`,
-							},
-						},
-						"& .MuiSlider-valueLabel": {
-							backgroundColor: theme.palette.primary.main,
+	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`,
 						},
 					},
-					...additionalSx,
-				]}
-			/>
+					"& .MuiSlider-valueLabel": {
+						backgroundColor: theme.palette.primary.main,
+					},
+				},
+				...additionalSx,
+			]}
+		/>
+	);
+});
+
+interface SliderWithLabelProps extends SliderProps {
+	fieldLabel?: string;
+	required?: boolean;
+	showValue?: boolean;
+	valueSuffix?: string;
+}
+
+export const SliderWithLabel = forwardRef<HTMLSpanElement, SliderWithLabelProps>(
+	function SliderWithLabel(
+		{ fieldLabel, required, showValue = true, valueSuffix = "", value, ...props },
+		ref
+	) {
+		const theme = useTheme();
+
+		const labelText = showValue && value !== undefined
+			? `${fieldLabel}: ${value}${valueSuffix}`
+			: fieldLabel;
+
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				{fieldLabel && <FieldLabel required={required}>{labelText}</FieldLabel>}
+				<SliderInput {...props} value={value} ref={ref} />
+			</Stack>
 		);
 	}
 );
diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx
index 215cdab5f..20d1ba96b 100644
--- a/client/src/Pages/CreateMonitor/index.tsx
+++ b/client/src/Pages/CreateMonitor/index.tsx
@@ -22,7 +22,7 @@ import {
 	Select,
 	Autocomplete,
 	SwitchComponent as Switch,
-	SliderInput as Slider,
+	SliderWithLabel,
 } from "@/Components/v2/inputs";
 import { useGet } from "@/Hooks/UseApi";
 import { useMonitorForm } from "@/Hooks/useMonitorForm";
@@ -372,36 +372,29 @@ const CreateMonitorPage = () => {
 							name="statusWindowSize"
 							control={control}
 							render={({ field }) => (
-								<Stack spacing={theme.spacing(2)}>
-									<Typography variant="body2">
-										{t("pages.createMonitor.form.incidents.option.checks.label")}:{" "}
-										{field.value}
-									</Typography>
-									<Slider
-										{...field}
-										min={1}
-										max={25}
-										valueLabelDisplay="auto"
-									/>
-								</Stack>
+								<SliderWithLabel
+									{...field}
+									fieldLabel={t("pages.createMonitor.form.incidents.option.checks.label")}
+									min={1}
+									max={25}
+									valueLabelDisplay="auto"
+								/>
 							)}
 						/>
 						<Controller
 							name="statusWindowThreshold"
 							control={control}
 							render={({ field }) => (
-								<Stack spacing={theme.spacing(2)}>
-									<Typography variant="body2">
-										{t("pages.createMonitor.form.incidents.option.percentage.label")}:{" "}
-										{field.value}%
-									</Typography>
-									<Slider
-										{...field}
-										min={1}
-										max={100}
-										valueLabelDisplay="auto"
-									/>
-								</Stack>
+								<SliderWithLabel
+									{...field}
+									fieldLabel={t(
+										"pages.createMonitor.form.incidents.option.percentage.label"
+									)}
+									valueSuffix="%"
+									min={1}
+									max={100}
+									valueLabelDisplay="auto"
+								/>
 							)}
 						/>
 					</Stack>