fix: slider behavior when using multiple pointers

pmndrs · Sep 3, 2024 · 825b3b4 · 825b3b4
1 parent 1db12ee
commit 825b3b4
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/packages/kits/default/src/slider.tsx b/packages/kits/default/src/slider.tsx
@@ -37,7 +37,7 @@ export const Slider: (props: SliderProperties & RefAttributes<ComponentInternals
     onChange.current = onValueChange
     const hasProvidedValue = providedValue != null
     const handler = useMemo(() => {
-      let down: boolean = false
+      let downPointerId: number | undefined
       function setValue(e: ThreeEvent<PointerEvent>) {
         if (internalRef.current == null) {
           return
@@ -58,21 +58,24 @@ export const Slider: (props: SliderProperties & RefAttributes<ComponentInternals
       }
       return {
         onPointerDown(e) {
-          down = true
+          if (downPointerId != null) {
+            return
+          }
+          downPointerId = e.pointerId
           setValue(e)
           ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
         },
         onPointerMove(e) {
-          if (!down) {
+          if (downPointerId != e.pointerId) {
             return
           }
           setValue(e)
         },
         onPointerUp(e) {
-          if (!down) {
+          if (downPointerId == null) {
             return
           }
-          down = false
+          downPointerId = undefined
           e.stopPropagation()
         },
       } satisfies EventHandlers