Improve UX

client/src/pages/Home/Home.jsx

@@ -59,14 +59,35 @@ export const Home = () => {
     };
 
     const handleFrequencyChange = (e) => {
-        if (isPlaying || dragging) {
         const rect = sliderRef.current.getBoundingClientRect();
-            const x = e.clientX - rect.left; // x position within the element.
-            const newFrequency = 20 + (x / rect.width) * 1980; // Scale to frequency range
+        const x = e.clientX - rect.left;
+        const clampedX = Math.max(0, Math.min(x, rect.width));
+        const newFrequency = 20 + (clampedX / rect.width) * 1980;
         setFrequency(newFrequency);
+    };
+
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (dragging) {
+                handleFrequencyChange(e);
             }
         };
 
+        const handleMouseUpGlobal = () => {
+            if (dragging) {
+                handleMouseUp();
+            }
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUpGlobal);
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUpGlobal);
+        };
+    }, [dragging]);
+
     useEffect(() => {
         if (isPlaying) {
             if (oscillatorRef.current) {
@@ -134,9 +155,6 @@ export const Home = () => {
                 <div
                     className="otamatone"
                     onMouseDown={handleMouseDown}
-                    onMouseUp={handleMouseUp}
-                    onMouseMove={handleFrequencyChange}
-                    onMouseLeave={handleMouseUp}
                 >
                     <div className="otamatone-neck" ref={sliderRef}>
                         <div className="frequency-indicator" style={{ left: `${(frequency - 20) / 1980 * 100}%` }}></div>

client/src/pages/Home/styles.sass

@@ -228,7 +228,8 @@
     flex-direction: column
     align-items: center
     justify-content: center
-    position: relative
+    position: absolute
+    left: 0
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
 
   .otamatone-eyes