@mui/x-charts-pro 9.0.0-beta.0 → 9.0.0

package/ChartsZoomSlider/internals/ChartsAxisZoomSlider.js

@@ -34,7 +34,57 @@ function ChartsAxisZoomSlider({
   const {
     yAxis
   } = (0, _hooks.useYAxes)();
-  const showPreview = zoomOptions.slider.preview;
+  const previewOption = zoomOptions.slider.preview;
+  const showPreview = !!previewOption;
+  const previewSeriesIds = typeof previewOption === 'object' ? previewOption.seriesIds : undefined;
+  const sliderRef = React.useRef(null);
+  const layerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
+  const isDraggingRef = React.useRef(false);
+
+  // Prevent scrolling on touch devices when interacting with the zoom slider.
+  // Listeners are attached to the parent `<svg>` element because calling
+  // `preventDefault` on SVG child elements does not reliably block scrolling —
+  // the browser's compositor decides based on the `<svg>` HTML element.
+  React.useEffect(() => {
+    const slider = sliderRef.current;
+    const layerContainer = layerContainerRef.current;
+    if (!slider || !layerContainer) {
+      return undefined;
+    }
+    function preventTouchDefault(event) {
+      if (slider && slider.contains(event.target)) {
+        event.preventDefault();
+      }
+    }
+    layerContainer.addEventListener('touchstart', preventTouchDefault, {
+      passive: false
+    });
+    layerContainer.addEventListener('touchmove', preventTouchDefault, {
+      passive: false
+    });
+    return () => {
+      layerContainer.removeEventListener('touchstart', preventTouchDefault);
+      layerContainer.removeEventListener('touchmove', preventTouchDefault);
+    };
+  }, [layerContainerRef]);
+  const tooltipOn = React.useCallback(() => {
+    setShowTooltip(true);
+  }, []);
+  const tooltipOff = React.useCallback(() => {
+    // Don't hide tooltip while dragging — pointerleave fires when the pointer
+    // moves away from the element during drag, but we want to keep the tooltip visible.
+    if (!isDraggingRef.current) {
+      setShowTooltip(false);
+    }
+  }, []);
+  const interactionStart = React.useCallback(() => {
+    isDraggingRef.current = true;
+    setShowTooltip(true);
+  }, []);
+  const interactionEnd = React.useCallback(() => {
+    isDraggingRef.current = false;
+    setShowTooltip(false);
+  }, []);
   if (!zoomData) {
     return null;
   }
@@ -72,6 +122,7 @@ function ChartsAxisZoomSlider({
     axisId: axisId,
     axisDirection: axisDirection,
     reverse: reverse,
+    seriesIds: previewSeriesIds,
     x: 0,
     y: 0,
     height: axisDirection === 'x' ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
@@ -86,15 +137,13 @@ function ChartsAxisZoomSlider({
     axisId: axisId,
     axisDirection: axisDirection,
     reverse: reverse,
-    onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-    onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+    onSelectStart: tooltipConditions === 'hover' ? interactionStart : undefined,
+    onSelectEnd: tooltipConditions === 'hover' ? interactionEnd : undefined
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    ref: sliderRef,
     "data-charts-zoom-slider": true,
     transform: `translate(${x} ${y})`,
-    style: {
-      touchAction: 'none'
-    },
     children: [track, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisZoomSliderActiveTrack.ChartsAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
@@ -104,8 +153,10 @@ function ChartsAxisZoomSlider({
       showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
       size: showPreview ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE,
       preview: showPreview,
-      onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-      onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+      onPointerEnter: tooltipConditions === 'hover' ? tooltipOn : undefined,
+      onPointerLeave: tooltipConditions === 'hover' ? tooltipOff : undefined,
+      onInteractionStart: tooltipConditions === 'hover' ? interactionStart : undefined,
+      onInteractionEnd: tooltipConditions === 'hover' ? interactionEnd : undefined
     })]
   });
 }

package/ChartsZoomSlider/internals/ChartsAxisZoomSlider.mjs

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, selectorChartAxisZoomOptionsLookup, useDrawingArea, useStore, ZOOM_SLIDER_MARGIN, ZOOM_SLIDER_PREVIEW_SIZE } from '@mui/x-charts/internals';
-import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { useChartsLayerContainerRef, useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { ChartsAxisZoomSliderPreview } from "./ChartsAxisZoomSliderPreview.mjs";
 import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.mjs";
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.mjs";
@@ -28,7 +28,57 @@ export function ChartsAxisZoomSlider({
   const {
     yAxis
   } = useYAxes();
-  const showPreview = zoomOptions.slider.preview;
+  const previewOption = zoomOptions.slider.preview;
+  const showPreview = !!previewOption;
+  const previewSeriesIds = typeof previewOption === 'object' ? previewOption.seriesIds : undefined;
+  const sliderRef = React.useRef(null);
+  const layerContainerRef = useChartsLayerContainerRef();
+  const isDraggingRef = React.useRef(false);
+
+  // Prevent scrolling on touch devices when interacting with the zoom slider.
+  // Listeners are attached to the parent `<svg>` element because calling
+  // `preventDefault` on SVG child elements does not reliably block scrolling —
+  // the browser's compositor decides based on the `<svg>` HTML element.
+  React.useEffect(() => {
+    const slider = sliderRef.current;
+    const layerContainer = layerContainerRef.current;
+    if (!slider || !layerContainer) {
+      return undefined;
+    }
+    function preventTouchDefault(event) {
+      if (slider && slider.contains(event.target)) {
+        event.preventDefault();
+      }
+    }
+    layerContainer.addEventListener('touchstart', preventTouchDefault, {
+      passive: false
+    });
+    layerContainer.addEventListener('touchmove', preventTouchDefault, {
+      passive: false
+    });
+    return () => {
+      layerContainer.removeEventListener('touchstart', preventTouchDefault);
+      layerContainer.removeEventListener('touchmove', preventTouchDefault);
+    };
+  }, [layerContainerRef]);
+  const tooltipOn = React.useCallback(() => {
+    setShowTooltip(true);
+  }, []);
+  const tooltipOff = React.useCallback(() => {
+    // Don't hide tooltip while dragging — pointerleave fires when the pointer
+    // moves away from the element during drag, but we want to keep the tooltip visible.
+    if (!isDraggingRef.current) {
+      setShowTooltip(false);
+    }
+  }, []);
+  const interactionStart = React.useCallback(() => {
+    isDraggingRef.current = true;
+    setShowTooltip(true);
+  }, []);
+  const interactionEnd = React.useCallback(() => {
+    isDraggingRef.current = false;
+    setShowTooltip(false);
+  }, []);
   if (!zoomData) {
     return null;
   }
@@ -66,6 +116,7 @@ export function ChartsAxisZoomSlider({
     axisId: axisId,
     axisDirection: axisDirection,
     reverse: reverse,
+    seriesIds: previewSeriesIds,
     x: 0,
     y: 0,
     height: axisDirection === 'x' ? ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
@@ -80,15 +131,13 @@ export function ChartsAxisZoomSlider({
     axisId: axisId,
     axisDirection: axisDirection,
     reverse: reverse,
-    onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-    onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+    onSelectStart: tooltipConditions === 'hover' ? interactionStart : undefined,
+    onSelectEnd: tooltipConditions === 'hover' ? interactionEnd : undefined
   });
   return /*#__PURE__*/_jsxs("g", {
+    ref: sliderRef,
     "data-charts-zoom-slider": true,
     transform: `translate(${x} ${y})`,
-    style: {
-      touchAction: 'none'
-    },
     children: [track, /*#__PURE__*/_jsx(ChartsAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
@@ -98,8 +147,10 @@ export function ChartsAxisZoomSlider({
       showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
       size: showPreview ? ZOOM_SLIDER_PREVIEW_SIZE : ZOOM_SLIDER_ACTIVE_TRACK_SIZE,
       preview: showPreview,
-      onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-      onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+      onPointerEnter: tooltipConditions === 'hover' ? tooltipOn : undefined,
+      onPointerLeave: tooltipConditions === 'hover' ? tooltipOff : undefined,
+      onInteractionStart: tooltipConditions === 'hover' ? interactionStart : undefined,
+      onInteractionEnd: tooltipConditions === 'hover' ? interactionEnd : undefined
     })]
   });
 }

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.d.mts

@@ -10,6 +10,8 @@ export interface ChartsAxisZoomSliderActiveTrackProps {
   showTooltip: boolean;
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
+  onInteractionStart?: () => void;
+  onInteractionEnd?: () => void;
 }
 export declare function ChartsAxisZoomSliderActiveTrack({
   axisId,
@@ -21,5 +23,7 @@ export declare function ChartsAxisZoomSliderActiveTrack({
   reverse,
   showTooltip,
   onPointerEnter,
-  onPointerLeave
+  onPointerLeave,
+  onInteractionStart,
+  onInteractionEnd
 }: ChartsAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.d.ts

@@ -10,6 +10,8 @@ export interface ChartsAxisZoomSliderActiveTrackProps {
   showTooltip: boolean;
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
+  onInteractionStart?: () => void;
+  onInteractionEnd?: () => void;
 }
 export declare function ChartsAxisZoomSliderActiveTrack({
   axisId,
@@ -21,5 +23,7 @@ export declare function ChartsAxisZoomSliderActiveTrack({
   reverse,
   showTooltip,
   onPointerEnter,
-  onPointerLeave
+  onPointerLeave,
+  onInteractionStart,
+  onInteractionEnd
 }: ChartsAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsAxisZoomSliderActiveTrack = ChartsAxisZoomSliderActiveTrack;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
-var React = _interopRequireWildcard(require("react"));
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _system = require("@mui/system");
 var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
@@ -20,6 +20,15 @@ var _zoomUtils = require("./zoom-utils");
 var _constants = require("./constants");
 var _chartsAxisZoomSliderTrackClasses = require("./chartsAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Invisible touch target that is only active on coarse pointer devices (touch).
+ * On fine pointer devices (mouse), it disables pointer events so it doesn't
+ * interfere with precise interactions on small zoom ranges.
+ */const TouchTarget = (0, _styles.styled)('rect')({
+  '@media (pointer: fine)': {
+    pointerEvents: 'none'
+  }
+});
 const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
   slot: 'internal',
   shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'preview'
@@ -42,7 +51,7 @@ const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
     }), {
       rx: 4,
       ry: 4,
-      stroke: theme.palette.grey[500]
+      stroke: (theme.vars || theme).palette.grey[500]
     })
   }]
 }));
@@ -56,7 +65,9 @@ function ChartsAxisZoomSliderActiveTrack({
   reverse,
   showTooltip,
   onPointerEnter,
-  onPointerLeave
+  onPointerLeave,
+  onInteractionStart,
+  onInteractionEnd
 }) {
   const {
     instance
@@ -67,7 +78,8 @@ function ChartsAxisZoomSliderActiveTrack({
   const store = (0, _internals.useStore)();
   const axis = store.use(_internals.selectorChartAxis, axisId);
   const drawingArea = (0, _internals.useDrawingArea)();
-  const activePreviewRectRef = React.useRef(null);
+  const activeTrackGroupRef = React.useRef(null);
+  const touchTargetRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);
   const [endThumbEl, setEndThumbEl] = React.useState(null);
   const {
@@ -80,8 +92,9 @@ function ChartsAxisZoomSliderActiveTrack({
   const previewThumbWidth = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_WIDTH : _constants.ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_HEIGHT : _constants.ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
-    const activePreviewRect = activePreviewRectRef.current;
-    if (!activePreviewRect) {
+    const group = activeTrackGroupRef.current;
+    const touchTarget = touchTargetRef.current;
+    if (!group || !touchTarget) {
       return;
     }
     let prevPointerZoom = 0;
@@ -100,13 +113,17 @@ function ChartsAxisZoomSliderActiveTrack({
       instance.moveZoomRange(axisId, deltaZoom);
     });
     const onPointerUp = () => {
-      activePreviewRect.removeEventListener('pointermove', onPointerMove);
+      group.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
+      onInteractionEnd?.();
     };
     const onPointerDown = event => {
       // Prevent text selection when dragging
       event.preventDefault();
-      activePreviewRect.setPointerCapture(event.pointerId);
+      // Use the touch target rect for pointer capture as setPointerCapture
+      // does not work reliably on SVG <g> elements on touch devices.
+      touchTarget.setPointerCapture(event.pointerId);
+      onInteractionStart?.();
       const axisZoomData = (0, _useChartProZoom.selectorChartAxisZoomData)(store.state, axisId);
       const element = chartsLayerContainerRef.current;
       if (!axisZoomData || !element) {
@@ -119,16 +136,18 @@ function ChartsAxisZoomSliderActiveTrack({
       }
       prevPointerZoom = pointerDownZoom;
       document.addEventListener('pointerup', onPointerUp);
-      activePreviewRect.addEventListener('pointermove', onPointerMove);
+      group.addEventListener('pointermove', onPointerMove);
     };
-    activePreviewRect.addEventListener('pointerdown', onPointerDown);
+
+    // Listen on the group so events from both the visible rect and touch target are captured
+    group.addEventListener('pointerdown', onPointerDown);
 
     // eslint-disable-next-line consistent-return
     return () => {
-      activePreviewRect.removeEventListener('pointerdown', onPointerDown);
+      group.removeEventListener('pointerdown', onPointerDown);
       onPointerMove.clear();
     };
-  }, [axisDirection, axisId, instance, reverse, store, chartsLayerContainerRef]);
+  }, [axisDirection, axisId, instance, reverse, store, chartsLayerContainerRef, onInteractionStart, onInteractionEnd]);
   const onStartThumbMove = event => {
     const element = chartsLayerContainerRef.current;
     if (!element) {
@@ -222,17 +241,38 @@ function ChartsAxisZoomSliderActiveTrack({
     endThumbY -= previewThumbHeight / 2;
   }
   const previewOffset = _constants.ZOOM_SLIDER_THUMB_HEIGHT > size ? (_constants.ZOOM_SLIDER_THUMB_HEIGHT - size) / 2 : 0;
+  const activeTrackX = previewX + (axisDirection === 'x' ? 0 : previewOffset);
+  const activeTrackY = previewY + (axisDirection === 'x' ? previewOffset : 0);
+
+  // Compute a larger invisible touch target centered on the visible active track
+  const touchWidth = axisDirection === 'y' ? Math.max(previewWidth, _constants.ZOOM_SLIDER_TOUCH_TARGET) : previewWidth;
+  const touchHeight = axisDirection === 'x' ? Math.max(previewHeight, _constants.ZOOM_SLIDER_TOUCH_TARGET) : previewHeight;
+  const touchX = activeTrackX - (touchWidth - previewWidth) / 2;
+  const touchY = activeTrackY - (touchHeight - previewHeight) / 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderActiveTrackRect, {
-      ref: activePreviewRectRef,
-      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
-      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
-      preview: preview,
-      width: previewWidth,
-      height: previewHeight,
-      onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave,
-      className: classes.active
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      ref: activeTrackGroupRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderActiveTrackRect, {
+        x: activeTrackX,
+        y: activeTrackY,
+        preview: preview,
+        width: previewWidth,
+        height: previewHeight,
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave,
+        className: classes.active
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TouchTarget, {
+        ref: touchTargetRef,
+        x: touchX,
+        y: touchY,
+        width: touchWidth,
+        height: touchHeight,
+        fill: "transparent",
+        stroke: "none",
+        cursor: "grab",
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisZoomSliderThumb.ChartsAxisZoomSliderThumb, {
       ref: setStartThumbEl,
       x: startThumbX,
@@ -243,6 +283,8 @@ function ChartsAxisZoomSliderActiveTrack({
       onMove: onStartThumbMove,
       onPointerEnter: onPointerEnter,
       onPointerLeave: onPointerLeave,
+      onInteractionStart: onInteractionStart,
+      onInteractionEnd: onInteractionEnd,
       placement: "start"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisZoomSliderThumb.ChartsAxisZoomSliderThumb, {
       ref: setEndThumbEl,
@@ -254,6 +296,8 @@ function ChartsAxisZoomSliderActiveTrack({
       onMove: onEndThumbMove,
       onPointerEnter: onPointerEnter,
       onPointerLeave: onPointerLeave,
+      onInteractionStart: onInteractionStart,
+      onInteractionEnd: onInteractionEnd,
       placement: "end"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
       anchorEl: startThumbEl,

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.mjs

@@ -1,18 +1,29 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { getChartPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartsContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
-import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.mjs";
 import { ChartsAxisZoomSliderThumb } from "./ChartsAxisZoomSliderThumb.mjs";
 import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.mjs";
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.mjs";
-import { ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.mjs";
+import { ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH, ZOOM_SLIDER_TOUCH_TARGET } from "./constants.mjs";
 import { useUtilityClasses } from "./chartsAxisZoomSliderTrackClasses.mjs";
+
+/**
+ * Invisible touch target that is only active on coarse pointer devices (touch).
+ * On fine pointer devices (mouse), it disables pointer events so it doesn't
+ * interfere with precise interactions on small zoom ranges.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TouchTarget = styled('rect')({
+  '@media (pointer: fine)': {
+    pointerEvents: 'none'
+  }
+});
 const ZoomSliderActiveTrackRect = styled('rect', {
   slot: 'internal',
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'preview'
@@ -35,7 +46,7 @@ const ZoomSliderActiveTrackRect = styled('rect', {
     }), {
       rx: 4,
       ry: 4,
-      stroke: theme.palette.grey[500]
+      stroke: (theme.vars || theme).palette.grey[500]
     })
   }]
 }));
@@ -49,7 +60,9 @@ export function ChartsAxisZoomSliderActiveTrack({
   reverse,
   showTooltip,
   onPointerEnter,
-  onPointerLeave
+  onPointerLeave,
+  onInteractionStart,
+  onInteractionEnd
 }) {
   const {
     instance
@@ -60,7 +73,8 @@ export function ChartsAxisZoomSliderActiveTrack({
   const store = useStore();
   const axis = store.use(selectorChartAxis, axisId);
   const drawingArea = useDrawingArea();
-  const activePreviewRectRef = React.useRef(null);
+  const activeTrackGroupRef = React.useRef(null);
+  const touchTargetRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);
   const [endThumbEl, setEndThumbEl] = React.useState(null);
   const {
@@ -73,8 +87,9 @@ export function ChartsAxisZoomSliderActiveTrack({
   const previewThumbWidth = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_HEIGHT : ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
-    const activePreviewRect = activePreviewRectRef.current;
-    if (!activePreviewRect) {
+    const group = activeTrackGroupRef.current;
+    const touchTarget = touchTargetRef.current;
+    if (!group || !touchTarget) {
       return;
     }
     let prevPointerZoom = 0;
@@ -93,13 +108,17 @@ export function ChartsAxisZoomSliderActiveTrack({
       instance.moveZoomRange(axisId, deltaZoom);
     });
     const onPointerUp = () => {
-      activePreviewRect.removeEventListener('pointermove', onPointerMove);
+      group.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
+      onInteractionEnd?.();
     };
     const onPointerDown = event => {
       // Prevent text selection when dragging
       event.preventDefault();
-      activePreviewRect.setPointerCapture(event.pointerId);
+      // Use the touch target rect for pointer capture as setPointerCapture
+      // does not work reliably on SVG <g> elements on touch devices.
+      touchTarget.setPointerCapture(event.pointerId);
+      onInteractionStart?.();
       const axisZoomData = selectorChartAxisZoomData(store.state, axisId);
       const element = chartsLayerContainerRef.current;
       if (!axisZoomData || !element) {
@@ -112,16 +131,18 @@ export function ChartsAxisZoomSliderActiveTrack({
       }
       prevPointerZoom = pointerDownZoom;
       document.addEventListener('pointerup', onPointerUp);
-      activePreviewRect.addEventListener('pointermove', onPointerMove);
+      group.addEventListener('pointermove', onPointerMove);
     };
-    activePreviewRect.addEventListener('pointerdown', onPointerDown);
+
+    // Listen on the group so events from both the visible rect and touch target are captured
+    group.addEventListener('pointerdown', onPointerDown);
 
     // eslint-disable-next-line consistent-return
     return () => {
-      activePreviewRect.removeEventListener('pointerdown', onPointerDown);
+      group.removeEventListener('pointerdown', onPointerDown);
       onPointerMove.clear();
     };
-  }, [axisDirection, axisId, instance, reverse, store, chartsLayerContainerRef]);
+  }, [axisDirection, axisId, instance, reverse, store, chartsLayerContainerRef, onInteractionStart, onInteractionEnd]);
   const onStartThumbMove = event => {
     const element = chartsLayerContainerRef.current;
     if (!element) {
@@ -215,17 +236,38 @@ export function ChartsAxisZoomSliderActiveTrack({
     endThumbY -= previewThumbHeight / 2;
   }
   const previewOffset = ZOOM_SLIDER_THUMB_HEIGHT > size ? (ZOOM_SLIDER_THUMB_HEIGHT - size) / 2 : 0;
+  const activeTrackX = previewX + (axisDirection === 'x' ? 0 : previewOffset);
+  const activeTrackY = previewY + (axisDirection === 'x' ? previewOffset : 0);
+
+  // Compute a larger invisible touch target centered on the visible active track
+  const touchWidth = axisDirection === 'y' ? Math.max(previewWidth, ZOOM_SLIDER_TOUCH_TARGET) : previewWidth;
+  const touchHeight = axisDirection === 'x' ? Math.max(previewHeight, ZOOM_SLIDER_TOUCH_TARGET) : previewHeight;
+  const touchX = activeTrackX - (touchWidth - previewWidth) / 2;
+  const touchY = activeTrackY - (touchHeight - previewHeight) / 2;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(ZoomSliderActiveTrackRect, {
-      ref: activePreviewRectRef,
-      x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
-      y: previewY + (axisDirection === 'x' ? previewOffset : 0),
-      preview: preview,
-      width: previewWidth,
-      height: previewHeight,
-      onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave,
-      className: classes.active
+    children: [/*#__PURE__*/_jsxs("g", {
+      ref: activeTrackGroupRef,
+      children: [/*#__PURE__*/_jsx(ZoomSliderActiveTrackRect, {
+        x: activeTrackX,
+        y: activeTrackY,
+        preview: preview,
+        width: previewWidth,
+        height: previewHeight,
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave,
+        className: classes.active
+      }), /*#__PURE__*/_jsx(TouchTarget, {
+        ref: touchTargetRef,
+        x: touchX,
+        y: touchY,
+        width: touchWidth,
+        height: touchHeight,
+        fill: "transparent",
+        stroke: "none",
+        cursor: "grab",
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxisZoomSliderThumb, {
       ref: setStartThumbEl,
       x: startThumbX,
@@ -236,6 +278,8 @@ export function ChartsAxisZoomSliderActiveTrack({
       onMove: onStartThumbMove,
       onPointerEnter: onPointerEnter,
       onPointerLeave: onPointerLeave,
+      onInteractionStart: onInteractionStart,
+      onInteractionEnd: onInteractionEnd,
       placement: "start"
     }), /*#__PURE__*/_jsx(ChartsAxisZoomSliderThumb, {
       ref: setEndThumbEl,
@@ -247,6 +291,8 @@ export function ChartsAxisZoomSliderActiveTrack({
       onMove: onEndThumbMove,
       onPointerEnter: onPointerEnter,
       onPointerLeave: onPointerLeave,
+      onInteractionStart: onInteractionStart,
+      onInteractionEnd: onInteractionEnd,
       placement: "end"
     }), /*#__PURE__*/_jsx(ChartsTooltipZoomSliderValue, {
       anchorEl: startThumbEl,

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.d.mts

@@ -1,4 +1,4 @@
-import { type AxisId } from '@mui/x-charts/internals';
+import { type AxisId, type SeriesId } from '@mui/x-charts/internals';
 interface ChartsAxisZoomSliderPreviewProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
@@ -7,11 +7,16 @@ interface ChartsAxisZoomSliderPreviewProps {
   y: number;
   height: number;
   width: number;
+  /**
+   * If provided, only the series with these IDs will be shown in the preview.
+   */
+  seriesIds?: SeriesId[];
 }
 export declare function ChartsAxisZoomSliderPreview({
   axisId,
   axisDirection,
   reverse,
+  seriesIds,
   ...props
 }: ChartsAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.d.ts

@@ -1,4 +1,4 @@
-import { type AxisId } from '@mui/x-charts/internals';
+import { type AxisId, type SeriesId } from '@mui/x-charts/internals';
 interface ChartsAxisZoomSliderPreviewProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
@@ -7,11 +7,16 @@ interface ChartsAxisZoomSliderPreviewProps {
   y: number;
   height: number;
   width: number;
+  /**
+   * If provided, only the series with these IDs will be shown in the preview.
+   */
+  seriesIds?: SeriesId[];
 }
 export declare function ChartsAxisZoomSliderPreview({
   axisId,
   axisDirection,
   reverse,
+  seriesIds,
   ...props
 }: ChartsAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
 export {};