[Slider] Don't error on minimal changes with readonly value

packages/mui-core/src/SliderUnstyled/SliderUnstyled.js

@@ -92,15 +92,10 @@ function roundValueToStep(value, step, min) {
   return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
 
-function setValueIndex({ values, source, newValue, index }) {
-  // Performance shortcut
-  if (source[index] === newValue) {
-    return source;
-  }
-
+function setValueIndex({ values, newValue, index }) {
   const output = values.slice();
   output[index] = newValue;
-  return output;
+  return output.sort(asc);
 }
 
 function focusThumb({ sliderRef, activeIndex, setActive }) {
@@ -348,10 +343,9 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
       const previousValue = newValue;
       newValue = setValueIndex({
         values,
-        source: valueDerived,
         newValue,
         index,
-      }).sort(asc);
+      });
 
       let activeIndex = index;
 
@@ -381,7 +375,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     axis += '-reverse';
   }
 
-  const getFingerNewValue = ({ finger, move = false, values: values2, source }) => {
+  const getFingerNewValue = ({ finger, move = false, values: values2 }) => {
     const { current: slider } = sliderRef;
     const { width, height, bottom, left } = slider.getBoundingClientRect();
     let percent;
@@ -428,10 +422,9 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
       const previousValue = newValue;
       newValue = setValueIndex({
         values: values2,
-        source,
         newValue,
         index: activeIndex,
-      }).sort(asc);
+      });
 
       // Potentially swap the index if needed.
       if (!(disableSwap && move)) {
@@ -463,7 +456,6 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
       finger,
       move: true,
       values,
-      source: valueDerived,
     });
 
     focusThumb({ sliderRef, activeIndex, setActive });
@@ -486,7 +478,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
       return;
     }
 
-    const { newValue } = getFingerNewValue({ finger, values, source: valueDerived });
+    const { newValue } = getFingerNewValue({ finger, values });
 
     setActive(-1);
     if (nativeEvent.type === 'touchend') {
@@ -515,7 +507,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
       touchId.current = touch.identifier;
     }
     const finger = trackFinger(nativeEvent, touchId);
-    const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });
+    const { newValue, activeIndex } = getFingerNewValue({ finger, values });
     focusThumb({ sliderRef, activeIndex, setActive });
 
     setValueState(newValue);
@@ -572,7 +564,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     // Avoid text selection
     event.preventDefault();
     const finger = trackFinger(event, touchId);
-    const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived });
+    const { newValue, activeIndex } = getFingerNewValue({ finger, values });
     focusThumb({ sliderRef, activeIndex, setActive });
 
     setValueState(newValue);

packages/mui-core/src/SliderUnstyled/SliderUnstyled.test.js

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createClientRender, createMount, describeConformance, screen } from 'test/utils';
+import { spy, stub } from 'sinon';
+import {
+  createClientRender,
+  createMount,
+  describeConformance,
+  fireEvent,
+  screen,
+} from 'test/utils';
 import SliderUnstyled, { sliderUnstyledClasses as classes } from '@mui/core/SliderUnstyled';
 
 describe('<SliderUnstyled />', () => {
@@ -93,4 +100,34 @@ describe('<SliderUnstyled />', () => {
       expect(screen.getByRole('slider')).to.have.attribute('aria-valuenow', '30');
     });
   });
+
+  [
+    ['readonly range', Object.freeze([1, 2])],
+    ['range', [1, 2]],
+  ].forEach(([valueLabel, value]) => {
+    it(`calls onChange even if the ${valueLabel} did not change`, () => {
+      const handleChange = spy();
+      const { container } = render(
+        <SliderUnstyled min={0} max={5} onChange={handleChange} value={value} />,
+      );
+      stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+        width: 100,
+        height: 10,
+        bottom: 10,
+        left: 0,
+      }));
+
+      // pixel:  0   20  40  60  80  100
+      // slider: |---|---|---|---|---|
+      // values: 0   1   2   3   4   5
+      // value:      ↑   ↑
+      // mouse:           ↑
+      fireEvent.mouseDown(container.firstChild, {
+        buttons: 1,
+        clientX: 41,
+      });
+
+      expect(handleChange.callCount).to.equal(1);
+    });
+  });
 });