Fix thumb shift once drag begins

packages/mui-base/src/Slider/Root/SliderRoot.types.ts

@@ -227,7 +227,7 @@ export interface UseSliderReturnValue {
     move?: boolean;
     offset?: number;
     boundary?: Partial<DOMRect>;
-  }) => { newValue: number | number[]; activeIndex: number; newValuePercent: number };
+  }) => { newValue: number | number[]; activeIndex: number; newPercentageValue: number };
   handleValueChange: (
     value: number | number[],
     activeThumb: number,

packages/mui-base/src/Slider/Root/useSliderRoot.ts

@@ -301,9 +301,9 @@ function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
       let percent;
 
       if (axis.indexOf('vertical') === 0) {
-        percent = (bottom - finger.y + offset) / height;
+        percent = (bottom - finger.y) / height + offset;
       } else {
-        percent = (finger.x - left + offset) / width;
+        percent = (finger.x - left) / width + offset;
       }
 
       if (axis.indexOf('-reverse') !== -1) {
@@ -352,7 +352,7 @@ function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
         }
       }
 
-      return { newValue, activeIndex, newValuePercent: percent };
+      return { newValue, activeIndex, newPercentageValue: percent };
     },
     [axis, disableSwap, marksValues, max, min, range, step, values],
   );

packages/mui-base/src/Slider/SliderOutput/SliderOutput.test.tsx

@@ -25,7 +25,7 @@ describe('<Slider.Output />', () => {
     getFingerNewValue: () => ({
       newValue: 0,
       activeIndex: 0,
-      newValuePercent: 0,
+      newPercentageValue: 0,
     }),
     handleValueChange: NOOP,
     isRtl: false,

packages/mui-base/src/Slider/SliderThumb/SliderThumb.test.tsx

@@ -24,7 +24,7 @@ describe('<Slider.Thumb />', () => {
     getFingerNewValue: () => ({
       newValue: 0,
       activeIndex: 0,
-      newValuePercent: 0,
+      newPercentageValue: 0,
     }),
     handleValueChange: NOOP,
     isRtl: false,

packages/mui-base/src/Slider/SliderThumb/SliderThumb.tsx

@@ -46,6 +46,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
     name,
     orientation,
     ownerState,
+    percentageValues,
     scale,
     setOpen,
     step,
@@ -70,6 +71,7 @@ const SliderThumb = React.forwardRef(function SliderThumb(
     min,
     name,
     orientation,
+    percentageValues,
     rootRef: mergedRef,
     scale,
     setOpen,

packages/mui-base/src/Slider/SliderThumb/SliderThumb.types.ts

@@ -26,6 +26,7 @@ export interface UseSliderThumbParameters
     | 'min'
     | 'name'
     | 'orientation'
+    | 'percentageValues'
     | 'scale'
     | 'setOpen'
     | 'step'

packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts

@@ -4,7 +4,6 @@ import { useForkRef } from '../../utils/useForkRef';
 import { useId } from '../../utils/useId';
 import { visuallyHidden } from '../../utils/visuallyHidden';
 import { useCompoundItem } from '../../useCompound';
-import { valueToPercent } from '../utils';
 import { SliderThumbMetadata } from '../Root/SliderRoot.types';
 import { UseSliderThumbParameters, UseSliderThumbReturnValue } from './SliderThumb.types';
 
@@ -50,6 +49,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
     setOpen,
     step,
     tabIndex,
+    percentageValues,
     values: sliderValues,
   } = parameters;
 
@@ -71,22 +71,20 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
 
   const thumbValue = sliderValues[index];
 
-  const percent = valueToPercent(thumbValue, min, max);
-
-  const offsetCssProperty = {
-    horizontal: 'left',
-    'horizontal-reverse': 'right',
-    vertical: 'bottom',
-  }[axis];
+  const percent = percentageValues[index];
 
   const getThumbStyle = React.useCallback(() => {
     return {
-      [offsetCssProperty]: `${percent}%`,
+      [{
+        horizontal: 'left',
+        'horizontal-reverse': 'right',
+        vertical: 'bottom',
+      }[axis]]: `${percent}%`,
       // So the non active thumb doesn't show its label on hover.
       pointerEvents: activeIndex !== -1 && activeIndex !== index ? 'none' : undefined,
       zIndex: activeIndex === index ? 1 : undefined,
     };
-  }, [activeIndex, offsetCssProperty, percent, index]);
+  }, [activeIndex, axis, percent, index]);
 
   const getRootProps: UseSliderThumbReturnValue['getRootProps'] = React.useCallback(
     (externalProps = {}) => {

packages/mui-base/src/Slider/SliderTrack/SliderTrack.test.tsx

@@ -24,7 +24,7 @@ describe('<Slider.Track />', () => {
     getFingerNewValue: () => ({
       newValue: 0,
       activeIndex: 0,
-      newValuePercent: 0,
+      newPercentageValue: 0,
     }),
     handleValueChange: NOOP,
     isRtl: false,

packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx

@@ -30,15 +30,13 @@ const SliderTrack = React.forwardRef(function SliderTrack(
     getFingerNewValue,
     handleValueChange,
     onValueCommitted,
-    max,
-    min,
     ownerState,
+    percentageValues,
     setActive,
     setDragging,
     setOpen,
     setValueState,
     subitems,
-    values,
   } = useSliderContext();
 
   const { getRootProps } = useSliderTrack({
@@ -48,15 +46,13 @@ const SliderTrack = React.forwardRef(function SliderTrack(
     getFingerNewValue,
     handleValueChange,
     onValueCommitted,
-    max,
-    min,
+    percentageValues,
+    rootRef: mergedRef,
     setActive,
     setDragging,
     setOpen,
     setValueState,
     subitems,
-    values,
-    rootRef: mergedRef,
   });
 
   const styleHooks = React.useMemo(

packages/mui-base/src/Slider/SliderTrack/SliderTrack.types.ts

@@ -12,14 +12,12 @@ export interface UseSliderTrackParameters
     | 'getFingerNewValue'
     | 'handleValueChange'
     | 'onValueCommitted'
-    | 'max'
-    | 'min'
+    | 'percentageValues'
     | 'setActive'
     | 'setDragging'
     | 'setOpen'
     | 'setValueState'
     | 'subitems'
-    | 'values'
   > {
   /**
    * The ref attached to the track of the Slider.

packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts

@@ -3,7 +3,6 @@ import { mergeReactProps } from '../../utils/mergeReactProps';
 import { ownerDocument } from '../../utils/owner';
 import { useForkRef } from '../../utils/useForkRef';
 import { useEventCallback } from '../../utils/useEventCallback';
-import { roundValueToStep, valueToPercent } from '../utils';
 import { focusThumb, trackFinger } from '../Root/useSliderRoot';
 import { UseSliderTrackParameters, UseSliderTrackReturnValue } from './SliderTrack.types';
 
@@ -22,15 +21,13 @@ export function useSliderTrack(parameters: UseSliderTrackParameters): UseSliderT
     getFingerNewValue,
     handleValueChange,
     onValueCommitted,
-    max,
-    min,
+    percentageValues,
     rootRef: externalRef,
     setActive,
     setDragging,
     setOpen,
     setValueState,
     subitems,
-    values,
   } = parameters;
 
   const trackRef = React.useRef<HTMLElement>(null);
@@ -202,23 +199,21 @@ export function useSliderTrack(parameters: UseSliderTrackParameters): UseSliderT
           event.preventDefault();
           const finger = trackFinger(event, touchId);
           if (finger !== false) {
-            const { newValue, activeIndex, newValuePercent } = getFingerNewValue({
+            const { newValue, activeIndex, newPercentageValue } = getFingerNewValue({
               finger,
               boundary: trackRef.current?.getBoundingClientRect(),
             });
+
             focusThumb({ sliderRef: trackRef, activeIndex, setActive });
 
             const eventLandedOnThumb = thumbRefs.includes(event.target as HTMLElement);
 
             if (eventLandedOnThumb) {
               const targetThumbIndex = (event.target as HTMLElement).getAttribute('data-index');
-              const oldValuePercent = valueToPercent(
-                values[Number(targetThumbIndex) ?? 0],
-                min,
-                max,
-              );
 
-              const offset = oldValuePercent - roundValueToStep(newValuePercent * 100, 1, 0);
+              const oldValuePercent = percentageValues[Number(targetThumbIndex)];
+
+              const offset = oldValuePercent / 100 - newPercentageValue;
 
               offsetRef.current = offset;
             }
@@ -249,12 +244,10 @@ export function useSliderTrack(parameters: UseSliderTrackParameters): UseSliderT
       handleTouchMove,
       handleTouchEnd,
       handleValueChange,
-      max,
-      min,
+      percentageValues,
       setActive,
       setValueState,
       thumbRefs,
-      values,
     ],
   );