[Slider] Simplify integration with form libraries (#22548)

packages/material-ui/src/Slider/Slider.js

@@ -405,6 +405,22 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     name: 'Slider',
   });
 
+  const handleChange =
+    onChange &&
+    ((event, value) => {
+      if (!(event instanceof Event)) event.persist();
+
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
+      Object.defineProperty(event, 'target', {
+        writable: true,
+        value: { value, name },
+      });
+
+      onChange(event, value);
+    });
+
   const range = Array.isArray(valueDerived);
   let values = range ? valueDerived.slice().sort(asc) : [valueDerived];
   values = values.map((value) => clamp(value, min, max));
@@ -538,8 +554,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     setValueState(newValue);
     setFocusVisible(index);
 
-    if (onChange) {
-      onChange(event, newValue);
+    if (handleChange) {
+      handleChange(event, newValue);
     }
     if (onChangeCommitted) {
       onChangeCommitted(event, newValue);
@@ -625,8 +641,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     focusThumb({ sliderRef, activeIndex, setActive });
     setValueState(newValue);
 
-    if (onChange) {
-      onChange(nativeEvent, newValue);
+    if (handleChange) {
+      handleChange(nativeEvent, newValue);
     }
   });
 
@@ -674,8 +690,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
 
     setValueState(newValue);
 
-    if (onChange) {
-      onChange(event, newValue);
+    if (handleChange) {
+      handleChange(event, newValue);
     }
 
     const doc = ownerDocument(sliderRef.current);
@@ -725,8 +741,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
 
     setValueState(newValue);
 
-    if (onChange) {
-      onChange(event, newValue);
+    if (handleChange) {
+      handleChange(event, newValue);
     }
 
     const doc = ownerDocument(sliderRef.current);

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

@@ -700,6 +700,27 @@ describe('<Slider />', () => {
     expect(container.querySelectorAll(`.${classes.mark}[data-index="2"]`).length).to.equal(1);
   });
 
+  it('should pass "name" and "value" as part of the event.target for onChange', () => {
+    const handleChange = stub().callsFake((event) => event.target);
+    const { getByRole } = render(
+      <Slider onChange={handleChange} name="change-testing" value={3} />,
+    );
+    const thumb = getByRole('slider');
+
+    act(() => {
+      thumb.focus();
+      fireEvent.keyDown(thumb, {
+        key: 'ArrowRight',
+      });
+    });
+
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChange.firstCall.returnValue).to.deep.equal({
+      name: 'change-testing',
+      value: 4,
+    });
+  });
+
   describe('prop: ValueLabelComponent', () => {
     it('receives the formatted value', () => {
       function ValueLabelComponent(props) {