mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-05-20 16:39:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

slider w label

Browse Source
This commit is contained in:
Alex Holliday
2026-01-30 00:00:12 +00:00
parent e69283e3ed
commit f6971ede69
2 changed files with 77 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/Components/v2/inputs/Slider.tsx
+59 -30
View File
@@ -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>
);
}
);
client/src/Pages/CreateMonitor/index.tsx
+18 -25
View File
@@ -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>