Completed color value editor component.

src/hooks/scroll.ts

@@ -49,6 +49,7 @@ export function useScroll<T extends HTMLElement>({
 
   const handleWheelEvent = useCallback((event: WheelEvent) => {
     event.preventDefault();
+    console.log("Handling wheel event.");
 
     setScrollLength((prev) =>
       handleScroll(

src/hooks/slider.tsx

@@ -87,17 +87,14 @@ export function useSlider({
     [calculatePosition],
   );
 
-  const handleEnd = useCallback(
-    (event: MouseEvent | TouchEvent) => {
-      document.removeEventListener("mousemove", handleMove);
-      document.removeEventListener("mouseup", handleEnd);
-      document.removeEventListener("touchmove", handleMove);
-      document.removeEventListener("touchend", handleEnd);
-      document.removeEventListener("touchcancel", handleEnd);
-      setIsDragging(false);
-    },
-    [handleMove],
-  );
+  const handleEnd = useCallback(() => {
+    document.removeEventListener("mousemove", handleMove);
+    document.removeEventListener("mouseup", handleEnd);
+    document.removeEventListener("touchmove", handleMove);
+    document.removeEventListener("touchend", handleEnd);
+    document.removeEventListener("touchcancel", handleEnd);
+    setIsDragging(false);
+  }, [handleMove]);
 
   const handleStart = useCallback(
     (event: MouseEvent | TouchEvent) => {
@@ -121,18 +118,20 @@ export function useSlider({
   const handleScrollUp = useCallback(() => {
     const dir = directionRef.current;
     const dims = dimensionsRef.current;
+    const inc = chooseValueByDirection(dir, 1, -1);
 
     setPosition((prev: number) =>
-      minmax(prev - 1, 0, chooseValueByDirection(dir, dims.x, dims.y)),
+      minmax(prev + inc, 0, chooseValueByDirection(dir, dims.x, dims.y)),
     );
   }, [setPosition]);
 
   const handleScrollDown = useCallback(() => {
     const dir = directionRef.current;
     const dims = dimensionsRef.current;
+    const inc = chooseValueByDirection(dir, -1, 1);
 
     setPosition((prev: number) =>
-      minmax(prev + 1, 0, chooseValueByDirection(dir, dims.x, dims.y)),
+      minmax(prev + inc, 0, chooseValueByDirection(dir, dims.x, dims.y)),
     );
   }, [setPosition]);
 

src/hooks/tests/sliderTest.cy.tsx

@@ -142,10 +142,6 @@ function createTestUtils(isHorizontal = true) {
   };
 }
 
-const isTouchSupported = () => {
-  return typeof TouchEvent !== "undefined";
-};
-
 // Tests
 
 describe("horizontal slider hook tests", () => {
@@ -201,25 +197,25 @@ describe("horizontal slider hook tests", () => {
   it("moves the slider with mouse wheel scrolling", () => {
     assertPosition(0);
 
-    triggerWheelEvent(100);
-    assertPosition(1);
-
-    triggerWheelEvent(100);
-    assertPosition(2);
-
     triggerWheelEvent(-100);
     assertPosition(1);
 
+    triggerWheelEvent(-100);
+    assertPosition(2);
+
+    triggerWheelEvent(100);
+    assertPosition(1);
+
     // Many smaller scrolls, to simulate touchpads
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
-    triggerWheelEvent(20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
+    triggerWheelEvent(-20);
     assertPosition(4);
   });
 });

src/hooks/window.ts

@@ -0,0 +1,4 @@
+export function useResize(callback: () => void): () => void {
+  window.addEventListener("resize", callback);
+  return () => window.removeEventListener("resize", callback);
+}