From f10ac877bad9f74e0b9c917599ff2b7cf2efcc18 Mon Sep 17 00:00:00 2001
From: Mountler <mikey-nihon@web.de>
Date: Wed, 4 Dec 2024 12:24:14 +0100
Subject: [PATCH] added increase/decrease of value if button is pressed and
 hold down of rangeslider

---
 .../ReactBaseComponents/RangeSlider.tsx       | 56 +++++++++++++++++--
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/RangeSlider.tsx b/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/RangeSlider.tsx
index 2790d8b3..539df6c5 100644
--- a/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/RangeSlider.tsx
+++ b/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/RangeSlider.tsx
@@ -30,6 +30,10 @@ export default function RangeSlider(props: RangeSliderProps) {
   const [fractionDigits] = useState<number>(
     props.fractionDigits ? props.fractionDigits : 0,
   );
+  const [intervalID, setIntervalID] = useState<NodeJS.Timeout>();
+  const [intervalActive, setIntervalActive] = useState<boolean>(false);
+
+  const intervalDelay = 300; // delay between value in-/decrements in ms
 
   useEffect(() => {
     props.callback(value);
@@ -47,9 +51,29 @@ export default function RangeSlider(props: RangeSliderProps) {
           shape={"square"}
           className="w-10"
           data-testid="leftRangeSliderButton"
-          onClick={() =>
-            setValue(value - step >= props.min ? value - step : props.min)
-          }
+          onMouseDown={() => {
+            setIntervalID(
+              setInterval(() => {
+                setIntervalActive(true);
+                setValue((value) =>
+                  value - step >= props.min ? value - step : props.min,
+                );
+              }, intervalDelay),
+            );
+          }}
+          onMouseLeave={() => {
+            setIntervalActive(false);
+            clearInterval(intervalID);
+          }}
+          onClick={() => {
+            if (!intervalActive) {
+              setValue((value) =>
+                value - step >= props.min ? value - step : props.min,
+              );
+            }
+            setIntervalActive(false);
+            clearInterval(intervalID);
+          }}
         >
           {props.buttons.imageLeft && (
             <img src={props.buttons?.imageLeft} alt="" />
@@ -96,9 +120,29 @@ export default function RangeSlider(props: RangeSliderProps) {
           shape={"square"}
           className="w-10"
           data-testid="rightRangeSliderButton"
-          onClick={() =>
-            setValue(value + step <= props.max ? value + step : props.max)
-          }
+          onMouseDown={() => {
+            setIntervalID(
+              setInterval(() => {
+                setIntervalActive(true);
+                setValue((value) =>
+                  value + step <= props.max ? value + step : props.max,
+                );
+              }, intervalDelay),
+            );
+          }}
+          onMouseLeave={() => {
+            setIntervalActive(false);
+            clearInterval(intervalID);
+          }}
+          onClick={() => {
+            if (!intervalActive) {
+              setValue((value) =>
+                value + step <= props.max ? value + step : props.max,
+              );
+            }
+            setIntervalActive(false);
+            clearInterval(intervalID);
+          }}
         >
           {props.buttons.imageRight && (
             <img src={props.buttons?.imageRight} alt="" />