From 26e00192d9729be0e6e2e8ebe2875036e5d43c98 Mon Sep 17 00:00:00 2001
From: Anders Rantala Hunderi <anders@ceetronsolutions.com>
Date: Fri, 11 Sep 2026 11:44:19 +0200
Subject: [PATCH 1/2] Slider: Made min-max clamp only apply if clamping would
 change the value

---
 frontend/src/lib/components/Slider/slider.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/Slider/slider.tsx b/frontend/src/lib/components/Slider/slider.tsx
index ae240b05c8..3461c8089f 100644
--- a/frontend/src/lib/components/Slider/slider.tsx
+++ b/frontend/src/lib/components/Slider/slider.tsx
@@ -359,7 +359,11 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
             clampedValue[1] = defaultedProps.max;
         }
 
-        setValueToClamp(isDualSlider ? clampedValue : clampedValue[0]);
+        const newValue = isDualSlider ? clampedValue : clampedValue[0];
+
+        if (!isEqual(newValue, internalValue)) {
+            setValueToClamp(isDualSlider ? clampedValue : clampedValue[0]);
+        }
     }
 
     React.useEffect(() => {

From 2f9254fc9c57b0ad0a2f7dff20b9e2c857a2dc8a Mon Sep 17 00:00:00 2001
From: Anders Rantala Hunderi <anders@ceetronsolutions.com>
Date: Tue, 15 Sep 2026 16:47:16 +0200
Subject: [PATCH 2/2] Made sure controlled slider value is prioritized

---
 frontend/src/lib/components/Slider/slider.tsx | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/Slider/slider.tsx b/frontend/src/lib/components/Slider/slider.tsx
index 3461c8089f..bc1d8b2c85 100644
--- a/frontend/src/lib/components/Slider/slider.tsx
+++ b/frontend/src/lib/components/Slider/slider.tsx
@@ -222,7 +222,9 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
             .value();
     }, [defaultedProps.markers, defaultedProps.max, defaultedProps.min]);
 
-    const isDualSlider = Array.isArray(internalValue);
+    // Prioritize the controlled value if possible
+    const activeValue = props.value ?? internalValue;
+    const isDualSlider = Array.isArray(activeValue);
 
     const { minLocked, maxLocked, setMinLocked, setMaxLocked } = useLockState({
         isDualSlider,
@@ -280,7 +282,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
     );
 
     useLockedValueUpdate({
-        value: internalValue,
+        value: activeValue,
         min: defaultedProps.min,
         max: defaultedProps.max,
         minLocked,
@@ -289,7 +291,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
     });
 
     useUnlockOnValueChange({
-        value: internalValue,
+        value: activeValue,
         min: defaultedProps.min,
         max: defaultedProps.max,
         minLocked,
@@ -299,38 +301,38 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
     });
 
     function onValueChangeInternal(newValue: number | number[], eventDetails: SliderBase.Root.ChangeEventDetails) {
-        const activeValue = isDualSliderValue(newValue) ? newValue[eventDetails.activeThumbIndex] : newValue;
-        const prevActiveValue = isDualSliderValue(internalValue)
-            ? internalValue[eventDetails.activeThumbIndex]
-            : internalValue;
+        const thumbValue = isDualSliderValue(newValue) ? newValue[eventDetails.activeThumbIndex] : newValue;
+        const prevThumbValue = isDualSliderValue(activeValue)
+            ? activeValue[eventDetails.activeThumbIndex]
+            : activeValue;
 
         if (isDualSliderValue(newValue)) {
-            if (eventDetails.activeThumbIndex === 0 && activeValue > defaultedProps.min) {
+            if (eventDetails.activeThumbIndex === 0 && thumbValue > defaultedProps.min) {
                 setMinLocked(false);
-            } else if (eventDetails.activeThumbIndex === 1 && activeValue < defaultedProps.max) {
+            } else if (eventDetails.activeThumbIndex === 1 && thumbValue < defaultedProps.max) {
                 setMaxLocked(false);
             }
         } else {
-            if (activeValue > defaultedProps.min) {
+            if (thumbValue > defaultedProps.min) {
                 setMinLocked(false);
             }
-            if (activeValue < defaultedProps.max) {
+            if (thumbValue < defaultedProps.max) {
                 setMaxLocked(false);
             }
         }
 
-        if (defaultedProps.snapToMarkers && !allMarkers.includes(activeValue)) {
+        if (defaultedProps.snapToMarkers && !allMarkers.includes(thumbValue)) {
             let snapTarget: SnapTarget = "nearest";
 
             // For keyboard movement, we should always go a new marker marker
             if (eventDetails.reason === "keyboard") {
-                snapTarget = prevActiveValue - activeValue < 0 ? "next" : "prev";
+                snapTarget = prevThumbValue - thumbValue < 0 ? "next" : "prev";
             }
 
             const snappedValue = getSnappedValue(allMarkers, newValue, snapTarget);
 
             // Only apply the snapped value if necessary
-            if (!isEqual(snappedValue, internalValue)) {
+            if (!isEqual(snappedValue, activeValue)) {
                 updateValue(snappedValue, eventDetails);
             }
         } else {
@@ -341,7 +343,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
     const showThumbValueLabels = defaultedProps.valueLabelDisplay === "auto" && (isHovered || isFocused);
 
     const [valueToClamp, setValueToClamp] = React.useState<null | number | number[]>(null);
-    let clampedValue = isDualSlider ? clone(internalValue as number[]) : ([internalValue, internalValue] as number[]);
+    let clampedValue = isDualSlider ? clone(activeValue as number[]) : ([activeValue, activeValue] as number[]);
 
     if (prevMin !== defaultedProps.min || prevMax !== defaultedProps.max) {
         setPrevMin(defaultedProps.min);
@@ -361,7 +363,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
 
         const newValue = isDualSlider ? clampedValue : clampedValue[0];
 
-        if (!isEqual(newValue, internalValue)) {
+        if (!isEqual(newValue, activeValue)) {
             setValueToClamp(isDualSlider ? clampedValue : clampedValue[0]);
         }
     }
@@ -378,7 +380,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
             {...baseProps}
             className={resolveClassNames(baseProps.className, "px-2xs grid items-center")}
             ref={wrapperRef}
-            value={internalValue}
+            value={activeValue}
             onValueChange={onValueChangeInternal}
             style={
                 {
@@ -483,7 +485,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
                                 index={0}
                                 size={componentSize}
                                 showValue={showThumbValueLabels}
-                                sliderValue={internalValue}
+                                sliderValue={activeValue}
                                 inputRefs={inputRefs}
                                 disabled={state.disabled}
                                 min={defaultedProps.min}
@@ -502,7 +504,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
                                 index={1}
                                 size={componentSize}
                                 showValue={showThumbValueLabels}
-                                sliderValue={internalValue}
+                                sliderValue={activeValue}
                                 inputRefs={inputRefs}
                                 disabled={state.disabled}
                                 min={defaultedProps.min}
@@ -572,15 +574,15 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps<number | numb
                                     disabled={props.disabled}
                                     labelFormat={markerLabelFormatFunc}
                                     onClick={(v) => {
-                                        if (!isDualSliderValue(internalValue)) {
+                                        if (!isDualSliderValue(activeValue)) {
                                             updateValue(v, { reason: "marker-clicked" }, true);
                                             inputRefs[0].current?.focus();
                                         } else {
                                             const nearestThumbIndex = minBy([0, 1], (idx) =>
-                                                Math.abs(internalValue[idx] - v),
+                                                Math.abs(activeValue[idx] - v),
                                             )!;
 
-                                            const newValue = [...internalValue];
+                                            const newValue = [...activeValue];
                                             newValue[nearestThumbIndex] = v;
 
                                             updateValue(newValue, { reason: "marker-clicked" }, true);