Repository: mui/mui-x
Pull request #17977: [charts-pro] Update zoom slider range selection cursor
Author: login: bernardobelchior
Labels: name: type: enhancement
description: It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.
name: scope: charts
description: Changes related to the charts.
Created: 2025-05-23T09:11:02Z | Merged: 2025-05-26T14:16:36Z

Use pointer instead of crosshair, as suggested by @KenanYusuf.

https://github.com/user-attachments/assets/7892ce19-1111-4ac8-9a4e-149e355cb83c




Diff:
diff --git a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
index 439224aaa208b..fc75b41026a50 100644
--- a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
+++ b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
@@ -18,6 +18,7 @@ import {
 import { styled } from '@mui/material/styles';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { shouldForwardProp } from '@mui/system';
 import { ChartsTooltipZoomSliderValue } from './ChartsTooltipZoomSliderValue';
 import {
   selectorChartAxisZoomData,
@@ -25,14 +26,29 @@ import {
 } from '../../internals/plugins/useChartProZoom';
 import { ChartAxisZoomSliderThumb } from './ChartAxisZoomSliderThumb';
 
-const ZoomSliderTrack = styled('rect')(({ theme }) => ({
-  '&': {
-    fill:
-      theme.palette.mode === 'dark'
-        ? (theme.vars || theme).palette.grey[800]
-        : (theme.vars || theme).palette.grey[300],
-    cursor: 'crosshair',
-  },
+const ZoomSliderTrack = styled('rect', {
+  shouldForwardProp: (prop) =>
+    shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting',
+})<{ axisDirection: 'x' | 'y'; isSelecting: boolean }>(({ theme }) => ({
+  fill:
+    theme.palette.mode === 'dark'
+      ? (theme.vars || theme).palette.grey[800]
+      : (theme.vars || theme).palette.grey[300],
+  cursor: 'pointer',
+  variants: [
+    {
+      props: { axisDirection: 'x', isSelecting: true },
+      style: {
+        cursor: 'ew-resize',
+      },
+    },
+    {
+      props: { axisDirection: 'y', isSelecting: true },
+      style: {
+        cursor: 'ns-resize',
+      },
+    },
+  ],
 }));
 
 const ZoomSliderActiveTrackRect = styled('rect')(({ theme }) => ({
@@ -162,6 +178,7 @@ function ChartAxisZoomSliderTrack({
   const ref = React.useRef<SVGRectElement>(null);
   const { instance, svgRef } = useChartContext<[UseChartProZoomSignature]>();
   const store = useStore<[UseChartProZoomSignature]>();
+  const [isSelecting, setIsSelecting] = React.useState(false);
 
   const onPointerDown = function onPointerDown(event: React.PointerEvent<SVGRectElement>) {
     const rect = ref.current;
@@ -241,6 +258,7 @@ function ChartAxisZoomSliderTrack({
       rect.releasePointerCapture(pointerUpEvent.pointerId);
       rect.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
+      setIsSelecting(false);
 
       if (pointerMoved) {
         return;
@@ -271,6 +289,7 @@ function ChartAxisZoomSliderTrack({
     document.addEventListener('pointerup', onPointerUp);
     rect.addEventListener('pointermove', onPointerMove);
 
+    setIsSelecting(true);
     instance.setAxisZoomData(axisId, (prev) => ({
       ...prev,
       start: zoomFromPointerDown,
@@ -278,7 +297,15 @@ function ChartAxisZoomSliderTrack({
     }));
   };
 
-  return <ZoomSliderTrack ref={ref} onPointerDown={onPointerDown} {...other} />;
+  return (
+    <ZoomSliderTrack
+      ref={ref}
+      onPointerDown={onPointerDown}
+      axisDirection={axisDirection}
+      isSelecting={isSelecting}
+      {...other}
+    />
+  );
 }
 
 const formatter = Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9f32dd1ce03c..beaa28f8c2cdf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,7 +78,7 @@ importers:
         version: 7.0.2(@mui/material@7.0.2(@emotion/react@11.14.0(@types/react@19.0.12)(react@19.0.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.12)(react@19.0.0))(@types/react@19.0.12)(react@19.0.0))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.0.12)(react@19.0.0)
       '@mui/internal-babel-plugin-display-name':
         specifier: github:mui/mui-public#master&path:./packages/babel-plugin-display-name
-        version: https://codeload.github.com/mui/mui-public/tar.gz/cd8ee237392a83203449987090669ea42fe0b2d6#path:./packages/babel-plugin-display-name(@babel/core@7.27.1)(@babel/preset-react@7.27.1(@babel/core@7.27.1))
+        version: https://codeload.github.com/mui/mui-public/tar.gz/931afef82da15f9926d06fbb220d2d681b9daea1#path:./packages/babel-plugin-display-name(@babel/core@7.27.1)(@babel/preset-react@7.27.1(@babel/core@7.27.1))
       '@mui/internal-babel-plugin-resolve-imports':
         specifier: ^2.0.2
         version: 2.0.2(@babel/core@7.27.1)
@@ -3674,8 +3674,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/internal-babel-plugin-display-name@https://codeload.github.com/mui/mui-public/tar.gz/cd8ee237392a83203449987090669ea42fe0b2d6#path:./packages/babel-plugin-display-name':
-    resolution: {path: ./packages/babel-plugin-display-name, tarball: https://codeload.github.com/mui/mui-public/tar.gz/cd8ee237392a83203449987090669ea42fe0b2d6}
+  '@mui/internal-babel-plugin-display-name@https://codeload.github.com/mui/mui-public/tar.gz/931afef82da15f9926d06fbb220d2d681b9daea1#path:./packages/babel-plugin-display-name':
+    resolution: {path: ./packages/babel-plugin-display-name, tarball: https://codeload.github.com/mui/mui-public/tar.gz/931afef82da15f9926d06fbb220d2d681b9daea1}
     version: 0.0.0
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -13834,7 +13834,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.12
 
-  '@mui/internal-babel-plugin-display-name@https://codeload.github.com/mui/mui-public/tar.gz/cd8ee237392a83203449987090669ea42fe0b2d6#path:./packages/babel-plugin-display-name(@babel/core@7.27.1)(@babel/preset-react@7.27.1(@babel/core@7.27.1))':
+  '@mui/internal-babel-plugin-display-name@https://codeload.github.com/mui/mui-public/tar.gz/931afef82da15f9926d06fbb220d2d681b9daea1#path:./packages/babel-plugin-display-name(@babel/core@7.27.1)(@babel/preset-react@7.27.1(@babel/core@7.27.1))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/helper-module-imports': 7.27.1


Reviews:
user: login: kenanyusuf
body: Would it be possible to use pointer for hovering on the track, and then when you are creating the new selection, it switches to the resize cursor?
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-23T09:14:18Z
user: login: JCQuintas
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-23T09:18:58Z
user: login: alexfauquette
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-26T07:58:25Z
user: login: bernardobelchior
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-26T09:37:06Z
user: login: alexfauquette
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-26T10:45:30Z
user: login: bernardobelchior
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-26T10:53:32Z
user: login: alexfauquette
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-26T14:12:58Z

Review comments:
diff_hunk: @@ -18,20 +18,29 @@ import {
 import { styled } from '@mui/material/styles';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import clsx from 'clsx';
+import { chartAxisZoomSliderClasses } from './chartAxisZoomSliderClasses';
 import { ChartsTooltipZoomSliderValue } from './ChartsTooltipZoomSliderValue';
 import {
   selectorChartAxisZoomData,
   UseChartProZoomSignature,
 } from '../../internals/plugins/useChartProZoom';
 import { ChartAxisZoomSliderThumb } from './ChartAxisZoomSliderThumb';
 
+const Group = styled('g')({
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.horizontal} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ew-resize' },
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.vertical} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ns-resize' },
+});
+
path: packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
user: login: alexfauquette
body: That's a bit weird to have that many classes. Users would need a specificity higher than `0-5-0` to verride those rules.


What about moving that style into the `ZoomSliderTrack`?

You can look at this component. In short, you pass the props of interest (the direction and the selecting state) such that it adapts its style to it, but do not propagate those props. The goal is to have only one class such that any style override wins over the default one

https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx/#L51-L82
created_at: 2025-05-26T07:58:25Z
author_association: MEMBER
diff_hunk: @@ -18,20 +18,29 @@ import {
 import { styled } from '@mui/material/styles';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import clsx from 'clsx';
+import { chartAxisZoomSliderClasses } from './chartAxisZoomSliderClasses';
 import { ChartsTooltipZoomSliderValue } from './ChartsTooltipZoomSliderValue';
 import {
   selectorChartAxisZoomData,
   UseChartProZoomSignature,
 } from '../../internals/plugins/useChartProZoom';
 import { ChartAxisZoomSliderThumb } from './ChartAxisZoomSliderThumb';
 
+const Group = styled('g')({
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.horizontal} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ew-resize' },
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.vertical} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ns-resize' },
+});
+
path: packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
user: login: bernardobelchior
body: I've updated the code as suggested. Is that what you had in mind?
created_at: 2025-05-26T09:37:06Z
author_association: MEMBER
diff_hunk: @@ -18,20 +18,29 @@ import {
 import { styled } from '@mui/material/styles';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import clsx from 'clsx';
+import { chartAxisZoomSliderClasses } from './chartAxisZoomSliderClasses';
 import { ChartsTooltipZoomSliderValue } from './ChartsTooltipZoomSliderValue';
 import {
   selectorChartAxisZoomData,
   UseChartProZoomSignature,
 } from '../../internals/plugins/useChartProZoom';
 import { ChartAxisZoomSliderThumb } from './ChartAxisZoomSliderThumb';
 
+const Group = styled('g')({
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.horizontal} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ew-resize' },
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.vertical} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ns-resize' },
+});
+
path: packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
user: login: alexfauquette
body: I think we can go further on the simplification with

```jsx
const ZoomSliderTrack = styled('rect', {
  shouldForwardProp: (prop) =>
    shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting',
})<{ axisDirection: 'x' | 'y'; isSelecting: boolean }>(({ theme }) => ({
  fill:
    theme.palette.mode === 'dark'
      ? (theme.vars || theme).palette.grey[800]
      : (theme.vars || theme).palette.grey[300],
  cursor: 'pointer',
  variants: [
    {
      props: { axisDirection: 'y', isSelecting: true },
      style: {
        cursor: 'ns-resize',
      },
    },
    {
      props: { axisDirection: 'x', isSelecting: true },
      style: {
        cursor: 'ew-resize',
      },
    },
  ],
}));
```
created_at: 2025-05-26T10:45:30Z
author_association: MEMBER
diff_hunk: @@ -18,20 +18,29 @@ import {
 import { styled } from '@mui/material/styles';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import clsx from 'clsx';
+import { chartAxisZoomSliderClasses } from './chartAxisZoomSliderClasses';
 import { ChartsTooltipZoomSliderValue } from './ChartsTooltipZoomSliderValue';
 import {
   selectorChartAxisZoomData,
   UseChartProZoomSignature,
 } from '../../internals/plugins/useChartProZoom';
 import { ChartAxisZoomSliderThumb } from './ChartAxisZoomSliderThumb';
 
+const Group = styled('g')({
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.horizontal} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ew-resize' },
+  [`&.${chartAxisZoomSliderClasses.root}.${chartAxisZoomSliderClasses.vertical} .${chartAxisZoomSliderClasses.track}.${chartAxisZoomSliderClasses.selecting}`]:
+    { cursor: 'ns-resize' },
+});
+
path: packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
user: login: bernardobelchior
body: That seems to work 😄 done 👍 
created_at: 2025-05-26T10:53:32Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-23T09:11:16Z
body: Thanks for adding a type label to the PR! 👍
author_association: CONTRIBUTOR
user: login: mui-bot
created_at: 2025-05-23T09:12:23Z
body: 
<!--
  0 failure: 
  0 warning: 
  
  2 markdown notices
  DangerID: danger-id-Danger;
-->



**Deploy preview:** <a href="https://deploy-preview-17977--material-ui-x.netlify.app/">https://deploy-preview-17977--material-ui-x.netlify.app/</a>

## Bundle size report

**Total Size Change:**<sup>${\tiny{\color{green}▼}}$</sup>-6.16KB<sup>(-0.05%)</sup> - **Total Gzip Change:**<sup>${\tiny{\color{green}▼}}$</sup>-2.19KB<sup>(-0.06%)</sup>
Files: 118 total (0 added, 0 removed, 44 changed)

**@mui/x-charts-pro/ChartZoomSlider**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+339B<sup>(+0.51%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+100B<sup>(+0.43%)</sup>
**@mui/x-charts-pro/ChartContainerPro**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-1.15KB<sup>(-0.81%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-422B<sup>(-0.88%)</sup>
**@mui/x-charts-pro/ChartDataProviderPro**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-1.09KB<sup>(-0.81%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-416B<sup>(-0.92%)</sup>
**@mui/x-charts-pro/FunnelChart**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-1.06KB<sup>(-0.52%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-423B<sup>(-0.64%)</sup>
**@mui/x-charts-pro/Heatmap**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-996B<sup>(-0.54%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-382B<sup>(-0.63%)</sup>
**@mui/x-charts**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-738B<sup>(-0.28%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-186B<sup>(-0.23%)</sup>
**@mui/x-charts/PieChart**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-582B<sup>(-0.36%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-201B<sup>(-0.38%)</sup>
**@mui/x-charts/ScatterChart**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-508B<sup>(-0.32%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-142B<sup>(-0.27%)</sup>
**@mui/x-charts/LineChart**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-489B<sup>(-0.26%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-110B<sup>(-0.18%)</sup>
**@mui/x-charts/BarChart**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-488B<sup>(-0.28%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-144B<sup>(-0.25%)</sup>
<details>
<summary>Show 34 more bundle changes</summary>

**@mui/x-data-grid-pro/DataGridPro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+115B<sup>(+0.03%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+45B<sup>(+0.04%)</sup>
**@mui/x-data-grid-premium**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.02%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+42B<sup>(+0.03%)</sup>
**@mui/x-data-grid-pro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.02%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+18B<sup>(+0.01%)</sup>
**@mui/x-date-pickers-pro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.04%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+44B<sup>(+0.05%)</sup>
**@mui/x-date-pickers-pro/DateRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.06%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+36B<sup>(+0.07%)</sup>
**@mui/x-date-pickers-pro/DateTimeRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.05%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+47B<sup>(+0.08%)</sup>
**@mui/x-date-pickers-pro/DesktopDateRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.07%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+43B<sup>(+0.08%)</sup>
**@mui/x-date-pickers-pro/DesktopDateTimeRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.06%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+37B<sup>(+0.06%)</sup>
**@mui/x-date-pickers-pro/DesktopTimeRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.08%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+34B<sup>(+0.08%)</sup>
**@mui/x-date-pickers-pro/MobileDateRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.07%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+34B<sup>(+0.07%)</sup>
**@mui/x-date-pickers-pro/MobileDateTimeRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.06%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+37B<sup>(+0.06%)</sup>
**@mui/x-date-pickers-pro/MobileTimeRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.08%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+30B<sup>(+0.07%)</sup>
**@mui/x-date-pickers-pro/StaticDateRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.11%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+36B<sup>(+0.12%)</sup>
**@mui/x-date-pickers-pro/TimeRangePicker**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.08%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+34B<sup>(+0.08%)</sup>
**@mui/x-tree-view-pro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+111B<sup>(+0.14%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+32B<sup>(+0.13%)</sup>
**@mui/x-data-grid-premium/DataGridPremium**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+110B<sup>(+0.02%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+47B<sup>(+0.03%)</sup>
**@mui/x-tree-view-pro/RichTreeViewPro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+110B<sup>(+0.15%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+27B<sup>(+0.12%)</sup>
**@mui/x-date-pickers-pro/DateRangeCalendar**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+109B<sup>(+0.14%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+34B<sup>(+0.14%)</sup>
**@mui/x-date-pickers-pro/DateRangePickerDay**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+109B<sup>(+0.44%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+30B<sup>(+0.38%)</sup>
**@mui/x-charts/ChartsAxis**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+95B<sup>(+0.14%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+19B<sup>(+0.08%)</sup>
**@mui/x-charts/ChartsXAxis**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+95B<sup>(+0.14%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+14B<sup>(+0.06%)</sup>
**@mui/x-charts/ChartsYAxis**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+95B<sup>(+0.14%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+15B<sup>(+0.06%)</sup>
**@mui/x-charts/ChartsReferenceLine**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+92B<sup>(+0.15%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+26B<sup>(+0.12%)</sup>
**@mui/x-charts/Gauge**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+92B<sup>(+0.09%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+18B<sup>(+0.05%)</sup>
**@mui/x-charts/ChartsText**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+89B<sup>(+3.01%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+19B<sup>(+1.28%)</sup>
**@mui/x-charts-pro/BarChartPro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+50B<sup>(+0.02%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+21B<sup>(+0.03%)</sup>
**@mui/x-charts-pro/LineChartPro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+50B<sup>(+0.02%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+18B<sup>(+0.02%)</sup>
**@mui/x-charts-pro/ScatterChartPro**&emsp;**parsed:**<sup>${\tiny{\color{red}▲}}$</sup>+30B<sup>(+0.02%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+36B<sup>(+0.06%)</sup>
**@mui/x-charts-pro**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-470B<sup>(-0.14%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-120B<sup>(-0.12%)</sup>
**@mui/x-charts/ChartContainer**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-457B<sup>(-0.41%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-149B<sup>(-0.39%)</sup>
**@mui/x-charts/RadarChart**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-428B<sup>(-0.27%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-173B<sup>(-0.34%)</sup>
**@mui/x-charts/SparkLineChart**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-419B<sup>(-0.24%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-144B<sup>(-0.25%)</sup>
**@mui/x-charts/ChartDataProvider**&emsp;**parsed:**<sup>${\tiny{\color{green}▼}}$</sup>-417B<sup>(-0.39%)</sup> **gzip:**<sup>${\tiny{\color{green}▼}}$</sup>-151B<sup>(-0.42%)</sup>
**@mui/x-data-grid**&emsp;**parsed:** 0B<sup>(0.00%)</sup> **gzip:**<sup>${\tiny{\color{red}▲}}$</sup>+1B<sup>(0.00%)</sup>

</details>

[Details of bundle changes](https://frontend-public.mui.com/size-comparison/mui/mui-x/diff?prNumber=17977&baseRef=master&baseCommit=b1f0ff1348e6168f52c57fb3239f10f48ff3f8e0&headCommit=14508c7cb9ed577269a9fb250a8f67cd5ad0ecd6&circleCIBuildNumber=541125)
<p align="right">
  Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 14508c7cb9ed577269a9fb250a8f67cd5ad0ecd6
</p>

author_association: NONE
user: login: codspeed-hq[bot]
created_at: 2025-05-23T09:19:23Z
body: <!-- __CODSPEED_PERFORMANCE_REPORT_COMMENT__ -->
<!-- __CODSPEED_INSTRUMENTATION_PERFORMANCE_REPORT_COMMENT__ -->

## [CodSpeed Performance Report](https://codspeed.io/mui/mui-x/branches/bernardobelchior%3Aimprov-zoom-slider-range-selection)

### Merging #17977 will **not alter performance**

<sub>Comparing <code>bernardobelchior:improv-zoom-slider-range-selection</code> (14508c7) with <code>master</code> (ea53ddc)</sub>



### Summary

`✅ 9` untouched benchmarks  




author_association: NONE
user: login: bernardobelchior
created_at: 2025-05-23T10:01:50Z
body: > Would it be possible to use pointer for hovering on the track, and then when you are creating the new selection, it switches to the resize cursor?

Something like this?


https://github.com/user-attachments/assets/7892ce19-1111-4ac8-9a4e-149e355cb83c


author_association: MEMBER
user: login: kenanyusuf
created_at: 2025-05-23T13:49:59Z
body: > Something like this?

@bernardobelchior yeah, that would be an improvement I think.
author_association: MEMBER