Update Vite configuration to deduplicate React and React-DOM; enhance DeviceContext with syncPeqCatalog method for improved PEQ state management; refactor LuxsinAPI to streamline PEQ filter updates; replace range input with ThumbOnlyRangeSlider in Home component for better user experience.

client/src/pages/Home.tsx

@@ -12,6 +12,7 @@
 import { useDevice } from "@/contexts/DeviceContext";
 import ConnectionPlaceholder from "@/components/ConnectionPlaceholder";
 import BottomNav from "@/components/BottomNav";
+import ThumbOnlyRangeSlider from "@/components/ThumbOnlyRangeSlider";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -646,54 +647,25 @@ export default function Home() {
                 boxShadow: volumeControlsLocked ? "none" : "0 0 8px rgba(0,255,246,0.5)",
               }}
             />
-            <input
-              type="range"
+            <ThumbOnlyRangeSlider
               min={0}
               max={200}
               value={localVol}
               disabled={volumeControlsLocked}
-              className="cyan-slider relative z-10"
-              onChange={(e) => {
+              onChange={(v) => {
                 if (volumeControlsLocked) return;
-                const v = Number(e.target.value);
                 setLocalVol(v);
               }}
-              onPointerDown={() => {
+              onDragStart={() => {
                 if (volumeControlsLocked) return;
                 isDragging.current = true;
               }}
-              onPointerUp={(e) => {
+              onDragEnd={() => {
                 isDragging.current = false;
-                if (volumeControlsLocked) return;
-                setVolume(Number(e.currentTarget.value));
               }}
-              onPointerCancel={(e) => {
-                isDragging.current = false;
+              onRelease={(v) => {
                 if (volumeControlsLocked) return;
-                setVolume(Number(e.currentTarget.value));
-              }}
-              onBlur={(e) => {
-                isDragging.current = false;
-                if (volumeControlsLocked) {
-                  return;
-                }
-                setVolume(Number(e.currentTarget.value));
-              }}
-              onKeyUp={(e) => {
-                if (volumeControlsLocked) return;
-                const k = e.key;
-                if (
-                  k === "ArrowLeft" ||
-                  k === "ArrowRight" ||
-                  k === "ArrowUp" ||
-                  k === "ArrowDown" ||
-                  k === "Home" ||
-                  k === "End" ||
-                  k === "PageUp" ||
-                  k === "PageDown"
-                ) {
-                  setVolume(Number(e.currentTarget.value));
-                }
+                setVolume(v);
               }}
             />
           </div>