refactor: explicitly set and apply capture property for event bindings

src/ReactCompareSlider.tsx

@@ -27,7 +27,7 @@ interface UpdateInternalPositionProps {
   isOffset?: boolean;
 }
 
-const EVENT_PASSIVE_PARAMS = { passive: true };
+const EVENT_PASSIVE_PARAMS = { capture: false, passive: true };
 const EVENT_CAPTURE_PARAMS = { capture: true, passive: false };
 
 /** Root Comparison slider. */

src/types.ts

@@ -12,7 +12,8 @@ export interface ReactCompareSliderCommonProps {
   /** Divider position. */
   position: ReactCompareSliderPropPosition;
   /**
-   * Shorthand CSS `transition` properties to apply to handle movement - does not need transition property.
+   * Shorthand CSS `transition` property to apply to handle movement. The specific CSS property
+   * to transition **must not** be provided.
    * @example '.5s ease-in-out'
    */
   transition?: string;

src/utils.ts

@@ -66,10 +66,10 @@ export const useEventListener = (
     const eventListener: EventListener = (event) =>
       savedHandler.current && savedHandler.current(event);
 
-    element.addEventListener(eventName, eventListener, handlerOptions);
+    element.addEventListener(eventName, eventListener, { capture: handlerOptions.capture });
 
     return (): void => {
-      element.removeEventListener(eventName, eventListener, handlerOptions);
+      element.removeEventListener(eventName, eventListener, { capture: handlerOptions.capture });
     };
   }, [eventName, element, handlerOptions]);
 };