diff --git a/src/modules/core/components/settings/NumberSetting.tsx b/src/modules/core/components/settings/NumberSetting.tsx
index 3ab797f5..8f67fd06 100644
--- a/src/modules/core/components/settings/NumberSetting.tsx
+++ b/src/modules/core/components/settings/NumberSetting.tsx
@@ -25,7 +25,6 @@ import Slider from '@mui/material/Slider';
import DialogContentText from '@mui/material/DialogContentText';
import InfoIcon from '@mui/icons-material/Info';
import { SxProps, Theme } from '@mui/material/styles';
-import { coerceIn } from '@/lib/HelperFunctions.ts';
type BaseProps = {
settingTitle: string;
@@ -77,6 +76,9 @@ export const NumberSetting = ({
const [dialogValue, setDialogValue] = useState(value);
const [originalValue, setOriginalValue] = useState(value);
+ const isInvalid =
+ (minValue !== undefined && minValue > dialogValue) || (maxValue !== undefined && maxValue < dialogValue);
+
const updateValue = useCallback(
(newValue: number, persist: boolean) => {
setDialogValue(newValue);
@@ -169,10 +171,11 @@ export const NumberSetting = ({
autoFocus
value={dialogValue}
type="number"
+ error={isInvalid}
+ helperText={isInvalid ? t('global.error.label.invalid_input') : ''}
onChange={(e) => {
const newValue = Number(e.target.value);
- const newValueCoerced = coerceIn(newValue, minValue ?? newValue, maxValue ?? newValue);
- updateValue(newValueCoerced, false);
+ updateValue(newValue, false);
}}
slotProps={{
input: {
@@ -204,7 +207,7 @@ export const NumberSetting = ({
-