From b10c233a70c05cd1b1cb3c0e77b637da6efe8dc1 Mon Sep 17 00:00:00 2001
From: Bernardo Belchior <bernardo@mui.com>
Date: Mon, 24 Nov 2025 15:09:56 +0100
Subject: [PATCH 1/2] [charts-pro] Fix vertical zoom slider thumb not working
 on mobile

---
 .../internals/ChartAxisZoomSliderThumb.tsx                | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx
index 9f7d24130bcc9..08fad67995bcd 100644
--- a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx
+++ b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx
@@ -61,6 +61,8 @@ export const ChartAxisZoomSliderThumb = React.forwardRef<SVGRectElement, ChartZo
         return;
       }
 
+      let prevTouchAction = 'auto';
+
       const onPointerMove = rafThrottle((event: PointerEvent) => {
         onMoveEvent(event);
       });
@@ -68,6 +70,7 @@ export const ChartAxisZoomSliderThumb = React.forwardRef<SVGRectElement, ChartZo
       const onPointerUp = () => {
         thumb.removeEventListener('pointermove', onPointerMove);
         thumb.removeEventListener('pointerup', onPointerUp);
+        document.body.style.touchAction = prevTouchAction;
       };
 
       const onPointerDown = (event: PointerEvent) => {
@@ -75,6 +78,11 @@ export const ChartAxisZoomSliderThumb = React.forwardRef<SVGRectElement, ChartZo
         event.preventDefault();
         event.stopPropagation();
         thumb.setPointerCapture(event.pointerId);
+
+        /* Disable touch scrolling while dragging to improve slider thumb usage on mobile */
+        prevTouchAction = document.body.style.touchAction;
+        document.body.style.touchAction = 'none';
+
         thumb.addEventListener('pointerup', onPointerUp);
         thumb.addEventListener('pointermove', onPointerMove);
       };

From ba8215222413bd99acaf3b57b51080979eb70819 Mon Sep 17 00:00:00 2001
From: Bernardo Belchior <bernardo@mui.com>
Date: Tue, 25 Nov 2025 09:18:33 +0100
Subject: [PATCH 2/2] Another fix attempt

---
 .../internals/ChartAxisZoomSliderThumb.tsx    | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx
index 08fad67995bcd..d086ea7d454b4 100644
--- a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx
+++ b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.tsx
@@ -38,6 +38,10 @@ export interface ChartZoomSliderThumbProps
   extends Omit<React.ComponentProps<'rect'>, 'orientation'>,
     ChartZoomSliderThumbOwnerState {}
 
+function preventDefault(event: Event) {
+  event.preventDefault();
+}
+
 /**
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal
@@ -58,19 +62,21 @@ export const ChartAxisZoomSliderThumb = React.forwardRef<SVGRectElement, ChartZo
       const thumb = thumbRef.current;
 
       if (!thumb) {
-        return;
+        return () => {};
       }
 
-      let prevTouchAction = 'auto';
+      // Prevent scrolling on touch devices when dragging the thumb
+      thumb.addEventListener('touchmove', preventDefault, { passive: false });
 
       const onPointerMove = rafThrottle((event: PointerEvent) => {
         onMoveEvent(event);
       });
 
-      const onPointerUp = () => {
+      const onPointerEnd = (event: PointerEvent) => {
         thumb.removeEventListener('pointermove', onPointerMove);
-        thumb.removeEventListener('pointerup', onPointerUp);
-        document.body.style.touchAction = prevTouchAction;
+        thumb.removeEventListener('pointerup', onPointerEnd);
+        thumb.removeEventListener('pointercancel', onPointerEnd);
+        thumb.releasePointerCapture(event.pointerId);
       };
 
       const onPointerDown = (event: PointerEvent) => {
@@ -79,19 +85,19 @@ export const ChartAxisZoomSliderThumb = React.forwardRef<SVGRectElement, ChartZo
         event.stopPropagation();
         thumb.setPointerCapture(event.pointerId);
 
-        /* Disable touch scrolling while dragging to improve slider thumb usage on mobile */
-        prevTouchAction = document.body.style.touchAction;
-        document.body.style.touchAction = 'none';
-
-        thumb.addEventListener('pointerup', onPointerUp);
         thumb.addEventListener('pointermove', onPointerMove);
+        thumb.addEventListener('pointercancel', onPointerEnd);
+        thumb.addEventListener('pointerup', onPointerEnd);
       };
 
       thumb.addEventListener('pointerdown', onPointerDown);
 
-      // eslint-disable-next-line consistent-return
       return () => {
         thumb.removeEventListener('pointerdown', onPointerDown);
+        thumb.removeEventListener('pointermove', onPointerMove);
+        thumb.removeEventListener('pointercancel', onPointerEnd);
+        thumb.removeEventListener('pointerup', onPointerEnd);
+        thumb.removeEventListener('touchmove', preventDefault);
         onPointerMove.clear();
       };
     }, [onMoveEvent, orientation]);