add touch events

radix-ui · May 3, 2024 · 442200f · 442200f
1 parent b32a933
commit 442200f
Showing 1 changed file with 34 additions and 7 deletions.
diff --git a/packages/react/slider/src/Slider.tsx b/packages/react/slider/src/Slider.tsx
@@ -262,6 +262,14 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
       return value(pointerPosition - rect.left);
     }
 
+    function getValueFromEvent(event: React.PointerEvent | React.TouchEvent) {
+      const pointerPosition =
+        'changedTouches' in event && event.changedTouches && event.changedTouches.length > 0
+          ? event.changedTouches[0].clientX
+          : event.clientX;
+      return getValueFromPointer(pointerPosition);
+    }
+
     return (
       <SliderOrientationProvider
         scope={props.__scopeSlider}
@@ -280,11 +288,11 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
             ['--radix-slider-thumb-transform' as any]: 'translateX(-50%)',
           }}
           onSlideStart={(event) => {
-            const value = getValueFromPointer(event.clientX);
+            const value = getValueFromEvent(event);
             onSlideStart?.(value);
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.clientX);
+            const value = getValueFromEvent(event);
             onSlideMove?.(value);
           }}
           onSlideEnd={() => {
@@ -336,6 +344,14 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
       return value(pointerPosition - rect.top);
     }
 
+    function getValueFromEvent(event: React.PointerEvent | React.TouchEvent) {
+      const pointerPosition =
+        'changedTouches' in event && event.changedTouches && event.changedTouches.length > 0
+          ? event.changedTouches[0].clientY
+          : event.clientY;
+      return getValueFromPointer(pointerPosition);
+    }
+
     return (
       <SliderOrientationProvider
         scope={props.__scopeSlider}
@@ -353,11 +369,11 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
             ['--radix-slider-thumb-transform' as any]: 'translateY(50%)',
           }}
           onSlideStart={(event) => {
-            const value = getValueFromPointer(event.clientY);
+            const value = getValueFromEvent(event);
             onSlideStart?.(value);
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.clientY);
+            const value = getValueFromEvent(event);
             onSlideMove?.(value);
           }}
           onSlideEnd={() => {
@@ -382,9 +398,9 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
 type SliderImplElement = React.ElementRef<typeof Primitive.span>;
 type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
 type SliderImplPrivateProps = {
-  onSlideStart(event: React.PointerEvent): void;
-  onSlideMove(event: React.PointerEvent): void;
-  onSlideEnd(event: React.PointerEvent): void;
+  onSlideStart(event: React.PointerEvent | React.TouchEvent): void;
+  onSlideMove(event: React.PointerEvent | React.TouchEvent): void;
+  onSlideEnd(event: React.PointerEvent | React.TouchEvent): void;
   onHomeKeyDown(event: React.KeyboardEvent): void;
   onEndKeyDown(event: React.KeyboardEvent): void;
   onStepKeyDown(event: React.KeyboardEvent): void;
@@ -448,6 +464,17 @@ const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
             onSlideEnd(event);
           }
         })}
+        onTouchMove={composeEventHandlers(props.onTouchMove, (event) => {
+          event.preventDefault();
+          onSlideMove(event);
+        })}
+        onTouchStart={composeEventHandlers(props.onTouchStart, (event) => {
+          event.preventDefault();
+          onSlideStart(event);
+        })}
+        onTouchEnd={composeEventHandlers(props.onTouchEnd, (event) => {
+          onSlideEnd(event);
+        })}
       />
     );
   }