feat: implement symmetric slider movement with Shift key

front_end/src/components/sliders/multi_slider.tsx

@@ -41,6 +41,7 @@ const MultiSlider: FC<Props> = ({
   const [allowCross, setAllowCross] = useState(true);
 
   const activeIndexRef = useRef<number | null>(null);
+  const isShiftHeldRef = useRef<boolean>(false);
 
   // controls the slide change behaviour
   // undefined - block any changes (e.g. clicking the track)
@@ -49,11 +50,15 @@ const MultiSlider: FC<Props> = ({
   const persistedPositionOrigin = useRef<ControlledValue | null | undefined>(
     undefined
   );
-  const handlePressIn = (index: number) => {
+  const handlePressIn = (index: number, shiftKey: boolean = false) => {
     activeIndexRef.current = index;
+    isShiftHeldRef.current = shiftKey;
 
     if (index === 1) {
       persistedPositionOrigin.current = controlledValue;
+    } else if (shiftKey && (index === 0 || index === 2)) {
+      // When shift is held and dragging left or right thumb, enable symmetric movement
+      persistedPositionOrigin.current = controlledValue;
     } else {
       persistedPositionOrigin.current = null;
     }
@@ -103,26 +108,53 @@ const MultiSlider: FC<Props> = ({
     let newValue: ControlledValue;
     if (persistedPositionOrigin.current !== null) {
       setAllowCross(true);
-      const firstItemDelta = calculateCenterMovementDiff(
-        {
-          origin: persistedPositionOrigin.current[1],
-          value: persistedPositionOrigin.current[0],
-        },
-        { origin: incoming[1], value: incoming[0] }
-      );
-      const lastItemDelta = calculateCenterMovementDiff(
-        {
-          origin: persistedPositionOrigin.current[1],
-          value: persistedPositionOrigin.current[2],
-        },
-        { origin: incoming[1], value: incoming[2] }
-      );
 
-      newValue = [
-        incoming[0] + firstItemDelta,
-        incoming[1],
-        incoming[2] + lastItemDelta,
-      ];
+      // Check if we're doing symmetric movement with Shift key on boundary thumbs
+      if (isShiftHeldRef.current && active !== 1) {
+        // Symmetric movement: when left/right thumb moves, move the opposite thumb symmetrically
+        // while keeping the center fixed
+        const centerValue = incoming[1];
+
+        if (active === 0) {
+          // Moving left thumb with Shift: mirror the movement on the right thumb
+          const leftDelta = incoming[0] - persistedPositionOrigin.current[0];
+          newValue = [
+            incoming[0],
+            centerValue,
+            persistedPositionOrigin.current[2] - leftDelta,
+          ];
+        } else {
+          // Moving right thumb with Shift: mirror the movement on the left thumb
+          const rightDelta = incoming[2] - persistedPositionOrigin.current[2];
+          newValue = [
+            persistedPositionOrigin.current[0] - rightDelta,
+            centerValue,
+            incoming[2],
+          ];
+        }
+      } else {
+        // Original center thumb movement logic
+        const firstItemDelta = calculateCenterMovementDiff(
+          {
+            origin: persistedPositionOrigin.current[1],
+            value: persistedPositionOrigin.current[0],
+          },
+          { origin: incoming[1], value: incoming[0] }
+        );
+        const lastItemDelta = calculateCenterMovementDiff(
+          {
+            origin: persistedPositionOrigin.current[1],
+            value: persistedPositionOrigin.current[2],
+          },
+          { origin: incoming[1], value: incoming[2] }
+        );
+
+        newValue = [
+          incoming[0] + firstItemDelta,
+          incoming[1],
+          incoming[2] + lastItemDelta,
+        ];
+      }
     } else {
       setAllowCross(false);
       newValue = [
@@ -163,12 +195,12 @@ const MultiSlider: FC<Props> = ({
             {...origin.props}
             value={getThumbValue(uiValue, props.index)}
             active={props.index === 1}
-            onClickIn={() => {
-              handlePressIn(props.index);
+            onClickIn={(shiftKey) => {
+              handlePressIn(props.index, shiftKey);
             }}
             onTouchStartCapture={(e) => {
               e.preventDefault();
-              handlePressIn(props.index);
+              handlePressIn(props.index, e.shiftKey);
             }}
           />
         );

front_end/src/components/sliders/primitives/thumb.tsx

@@ -11,7 +11,7 @@ type Props = DetailedHTMLProps<
   active: boolean;
   value: number;
   showValue?: boolean;
-  onClickIn?: () => void;
+  onClickIn?: (shiftKey: boolean) => void;
   onArrowClickIn?: () => void;
   onArrowClickOut?: (direction: -1 | 1) => void;
   className?: string;
@@ -48,11 +48,11 @@ const SliderThumb: FC<Props> = ({
     <div
       onMouseDown={(e) => {
         e.preventDefault();
-        onClickIn?.();
+        onClickIn?.(e.shiftKey);
       }}
       onTouchStart={(e) => {
         e.preventDefault();
-        onClickIn?.();
+        onClickIn?.(e.shiftKey);
       }}
       className={cn(
         "flex items-center border-2 border-gray-600 bg-blue-100 text-center font-medium dark:border-gray-600-dark dark:bg-blue-100-dark",