[material-ui][Slider] Fix arrow keys past the end for Slider with custom marks (#45050)

Signed-off-by: Josh Kelley <[email protected]>
Co-authored-by: ZeeshanTamboli <[email protected]>

Author: joshkel

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

@@ -1195,6 +1195,54 @@ describe('<Slider />', () => {
         });
       });
     });
+
+    it('stops at the max value with custom marks', () => {
+      const handleChange = stub();
+      render(
+        <Slider
+          marks={[{ value: 10 }, { value: 20 }, { value: 30 }]}
+          step={null}
+          value={30}
+          onChange={handleChange}
+        />,
+      );
+
+      const slider = screen.getByRole('slider');
+      expect(slider).to.have.attribute('aria-valuenow', '30');
+
+      act(() => {
+        slider.focus();
+      });
+
+      fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+      expect(handleChange.callCount).to.equal(0);
+      expect(slider).to.have.attribute('aria-valuenow', '30');
+    });
+
+    it('stops at the min value with custom marks', () => {
+      const handleChange = stub();
+      render(
+        <Slider
+          marks={[{ value: 10 }, { value: 20 }, { value: 30 }]}
+          step={null}
+          value={10}
+          onChange={handleChange}
+        />,
+      );
+
+      const slider = screen.getByRole('slider');
+      expect(slider).to.have.attribute('aria-valuenow', '10');
+
+      act(() => {
+        slider.focus();
+      });
+
+      fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+      expect(handleChange.callCount).to.equal(0);
+      expect(slider).to.have.attribute('aria-valuenow', '10');
+    });
   });
 
   describe('warnings', () => {

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

@@ -311,9 +311,9 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     let newValue: number | number[] = valueInput;
     if (marks && step == null) {
       const maxMarksValue = marksValues[marksValues.length - 1];
-      if (newValue > maxMarksValue) {
+      if (newValue >= maxMarksValue) {
         newValue = maxMarksValue;
-      } else if (newValue < marksValues[0]) {
+      } else if (newValue <= marksValues[0]) {
         newValue = marksValues[0];
       } else {
         newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];