[Slider] Set onChangeCommitted to receive the last argument passed to…

… onChange (#44795)

Co-authored-by: Albert Yu <[email protected]>

packages/mui-material/src/Slider/Slider.test.js

@@ -1665,4 +1665,38 @@ describe('<Slider />', () => {
       width: '10px',
     });
   });
+
+  describe('When the onMouseUp event occurs at a different location than the last onChange event', () => {
+    it('should pass onChangeCommitted the same value that was passed to the last onChange event', () => {
+      const handleChange = spy();
+      const handleChangeCommitted = spy();
+
+      const { container } = render(
+        <Slider onChange={handleChange} onChangeCommitted={handleChangeCommitted} value={0} />,
+      );
+      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+        width: 100,
+        left: 0,
+      }));
+
+      fireEvent.mouseDown(container.firstChild, {
+        buttons: 1,
+        clientX: 10,
+      });
+      fireEvent.mouseMove(container.firstChild, {
+        buttons: 1,
+        clientX: 15,
+      });
+      fireEvent.mouseUp(container.firstChild, {
+        buttons: 1,
+        clientX: 20,
+      });
+
+      expect(handleChange.callCount).to.equal(2);
+      expect(handleChange.args[0][1]).to.equal(10);
+      expect(handleChange.args[1][1]).to.equal(15);
+      expect(handleChangeCommitted.callCount).to.equal(1);
+      expect(handleChangeCommitted.args[0][1]).to.equal(15);
+    });
+  });
 });

packages/mui-material/src/Slider/useSlider.ts

@@ -238,6 +238,8 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   const [open, setOpen] = React.useState(-1);
   const [dragging, setDragging] = React.useState(false);
   const moveCount = React.useRef(0);
+  // lastChangedValue is updated whenever onChange is triggered.
+  const lastChangedValue = React.useRef<number | number[] | null>(null);
 
   const [valueDerived, setValueState] = useControlled({
     controlled: valueProp,
@@ -261,6 +263,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
         value: { value, name },
       });
 
+      lastChangedValue.current = value;
       onChange(clonedEvent, value, thumbIndex);
     });
 
@@ -350,7 +353,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     }
 
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
   };
 
@@ -587,7 +590,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     }
 
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
 
     touchId.current = undefined;