[Slider] Warn when min is not less than max (mui#1475)

atomiks · Feb 28, 2025 · 458030d · 458030d
1 parent 65a21cb
commit 458030d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/react/src/number-field/root/useScrub.ts b/packages/react/src/number-field/root/useScrub.ts
@@ -46,7 +46,6 @@ export function useScrub(params: ScrubParams) {
     return subscribeToVisualViewportResize(scrubAreaCursorRef.current, visualScaleRef);
   }, [isScrubbing]);
 
-  // Helper function to update cursor transform directly
   const updateCursorTransform = useEventCallback((x: number, y: number) => {
     if (scrubAreaCursorRef.current) {
       scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;

diff --git a/packages/react/src/slider/root/useSliderRoot.ts b/packages/react/src/slider/root/useSliderRoot.ts
@@ -10,6 +10,7 @@ import { useControlled } from '../../utils/useControlled';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useForkRef } from '../../utils/useForkRef';
 import { valueToPercent } from '../../utils/valueToPercent';
+import { warn } from '../../utils/warn';
 import type { CompositeMetadata } from '../../composite/list/CompositeList';
 import { useDirection } from '../../direction-provider/DirectionContext';
 import { useField } from '../../field/useField';
@@ -216,7 +217,7 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
       thumbIndex: number,
       event: Event,
     ) => {
-      if (areValuesEqual(newValue, valueUnwrapped)) {
+      if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
         return;
       }
 
@@ -375,9 +376,13 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
       return;
     }
 
+    if (min >= max) {
+      warn('Slider `max` must be greater than `min`');
+    }
+
     if (typeof valueUnwrapped === 'number') {
       const newPercentageValue = valueToPercent(valueUnwrapped, min, max);
-      if (newPercentageValue !== percentageValues[0]) {
+      if (newPercentageValue !== percentageValues[0] && !Number.isNaN(newPercentageValue)) {
         setPercentageValues([newPercentageValue]);
       }
     } else if (Array.isArray(valueUnwrapped)) {