[charts-pro] Update zoom slider range selection cursor

[bernardobelchior]

Use pointer instead of crosshair, as suggested by @kenanyusuf.

Screen.Recording.2025-05-23.at.12.01.33.mov

[github-actions]

Thanks for adding a type label to the PR! 👍

[mui-bot]

Deploy preview: https://deploy-preview-17977--material-ui-x.netlify.app/

Bundle size report

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

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

Show 34 more bundle changes

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

Details of bundle changes

Generated by 🚫 dangerJS against 14508c7

[kenanyusuf]

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?

[codspeed-hq]

CodSpeed Performance Report

Merging #17977 will not alter performance

_{Comparing bernardobelchior:improv-zoom-slider-range-selection (14508c7) with master (ea53ddc)}

Summary

✅ 9 untouched benchmarks

[bernardobelchior]

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?

Screen.Recording.2025-05-23.at.12.01.33.mov

[kenanyusuf]

Something like this?

@bernardobelchior yeah, that would be an improvement I think.

[alexfauquette]

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

[bernardobelchior]

I've updated the code as suggested. Is that what you had in mind?

[alexfauquette]

I think we can go further on the simplification with

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',
      },
    },
  ],
}));

[bernardobelchior]

That seems to work 😄 done 👍