diff --git a/docs/src/app/(private)/experiments/slider-change-committed-lag.tsx b/docs/src/app/(private)/experiments/slider-change-committed-lag.tsx
deleted file mode 100644
index b8562483a8..0000000000
--- a/docs/src/app/(private)/experiments/slider-change-committed-lag.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-// https://github.com/mui/material-ui/issues/41739
-// to cross check whether this issue would still occur in the new API
-import * as React from 'react';
-import { Slider } from '@base-ui-components/react/slider';
-import classes from './slider.module.css';
-
-export default function App() {
-  const [val1, setVal1] = React.useState(80);
-  const [val2, setVal2] = React.useState<number | null>(null);
-
-  return (
-    <div
-      style={{
-        fontFamily: 'system-ui, sans-serif',
-        width: '40rem',
-      }}
-    >
-      <Slider.Root
-        className={classes.slider}
-        value={val1}
-        onValueChange={(newValue) => setVal1(newValue as number)}
-        onValueCommitted={(newValue) => setVal2(newValue as number)}
-      >
-        <Slider.Value className={classes.output} />
-        <Slider.Control className={classes.control}>
-          <Slider.Track className={classes.track}>
-            <Slider.Indicator className={classes.indicator} />
-            <Slider.Thumb className={classes.thumb} />
-          </Slider.Track>
-        </Slider.Control>
-      </Slider.Root>
-
-      <pre>onValueChange value: {val1}</pre>
-      <pre>onValueCommitted value: {val2}</pre>
-    </div>
-  );
-}
diff --git a/docs/src/app/(private)/experiments/slider-format.tsx b/docs/src/app/(private)/experiments/slider-format.tsx
deleted file mode 100644
index 26756bcee8..0000000000
--- a/docs/src/app/(private)/experiments/slider-format.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-import * as React from 'react';
-import { useTheme } from '@mui/system';
-import { Slider } from '@base-ui-components/react/slider';
-import c from './slider.module.css';
-
-export default function UnstyledSliderIntroduction() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-  return (
-    <div
-      className={isDarkMode ? 'dark' : ''}
-      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
-    >
-      <Slider.Root
-        className={c.slider}
-        defaultValue={[50, 75]}
-        aria-labelledby="BudgetSliderLabel"
-        format={{
-          style: 'currency',
-          currency: 'USD',
-          currencyDisplay: 'name',
-        }}
-      >
-        <Label
-          id="BudgetSliderLabel"
-          htmlFor=":slider-thumb-input:"
-          className={c.label}
-        >
-          Budget
-        </Label>
-        <Slider.Value className={c.output}>
-          {(_, values) => `$${values[0].toFixed(2)} - ${values[1].toFixed(2)} USD`}
-        </Slider.Value>
-        <Slider.Control className={c.control}>
-          <Slider.Track className={c.track}>
-            <Slider.Indicator className={c.indicator} />
-            <Slider.Thumb className={c.thumb} inputId="thumb1" />
-            <Slider.Thumb className={c.thumb} inputId="thumb2" />
-          </Slider.Track>
-        </Slider.Control>
-      </Slider.Root>
-    </div>
-  );
-}
-
-function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
-  const { id, htmlFor, ...otherProps } = props;
-
-  return <label id={id} htmlFor={htmlFor} {...otherProps} />;
-}
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
diff --git a/docs/src/app/(private)/experiments/slider.module.css b/docs/src/app/(private)/experiments/slider.module.css
deleted file mode 100644
index 995cb48c6d..0000000000
--- a/docs/src/app/(private)/experiments/slider.module.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.slider {
-  font-family:
-    IBM Plex Sans,
-    sans-serif;
-  font-size: 1rem;
-  width: 100%;
-  align-items: center;
-  position: relative;
-  -webkit-tap-highlight-color: transparent;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 1rem;
-}
-
-.output {
-  text-align: right;
-}
-
-.control {
-  grid-column: 1/3;
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 16px;
-  border-radius: 9999px;
-  touch-action: none;
-}
-
-.track {
-  width: 100%;
-  height: 2px;
-  border-radius: 9999px;
-  background-color: var(--color-gray-400);
-  touch-action: none;
-}
-
-.dark .track {
-  background-color: var(--color-gray-700);
-}
-
-.control[data-disabled] {
-  cursor: not-allowed;
-}
-
-.indicator {
-  height: 2px;
-  border-radius: 9999px;
-  background-color: var(--color-gray-900);
-}
-
-.dark .indicator {
-  background-color: var(--color-gray-100);
-}
-
-.thumb {
-  width: 16px;
-  height: 16px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  background-color: var(--color-gray-900);
-  touch-action: none;
-
-  &:focus-visible {
-    outline: 2px solid var(--color-gray-900);
-    outline-offset: 2px;
-  }
-
-  &[data-dragging] {
-    background-color: pink;
-  }
-
-  &[data-disabled] {
-    background-color: var(--color-gray-300);
-  }
-}
-
-.dark .thumb {
-  background-color: var(--color-gray-100);
-
-  &:focus-visible {
-    outline-color: var(--color-gray-300);
-    outline-width: 1px;
-    outline-offset: 3px;
-  }
-
-  &[data-disabled] {
-    background-color: var(--color-gray-600);
-  }
-}
-
-.label {
-  cursor: unset;
-  font-weight: bold;
-}
-
-.label[data-disabled] {
-  color: var(--color-gray-600);
-}
diff --git a/packages/react/src/slider/control/SliderControl.test.tsx b/packages/react/src/slider/control/SliderControl.test.tsx
index 4e55a7a590..c8d075ccce 100644
--- a/packages/react/src/slider/control/SliderControl.test.tsx
+++ b/packages/react/src/slider/control/SliderControl.test.tsx
@@ -17,6 +17,7 @@ const testRootContext: SliderRootContext = {
   }),
   setValue: NOOP,
   largeStep: 10,
+  lastChangedValueRef: { current: null },
   thumbMap: new Map(),
   max: 100,
   min: 0,
diff --git a/packages/react/src/slider/control/SliderControl.tsx b/packages/react/src/slider/control/SliderControl.tsx
index 46e449ee6f..924072a8ba 100644
--- a/packages/react/src/slider/control/SliderControl.tsx
+++ b/packages/react/src/slider/control/SliderControl.tsx
@@ -24,14 +24,15 @@ const SliderControl = React.forwardRef(function SliderControl(
     disabled,
     dragging,
     getFingerState,
-    setValue,
+    lastChangedValueRef,
     minStepsBetweenValues,
     onValueCommitted,
-    state,
     percentageValues,
     registerSliderControl,
     setActive,
     setDragging,
+    setValue,
+    state,
     step,
     thumbRefs,
   } = useSliderRootContext();
@@ -40,7 +41,7 @@ const SliderControl = React.forwardRef(function SliderControl(
     disabled,
     dragging,
     getFingerState,
-    setValue,
+    lastChangedValueRef,
     minStepsBetweenValues,
     onValueCommitted,
     percentageValues,
@@ -48,6 +49,7 @@ const SliderControl = React.forwardRef(function SliderControl(
     rootRef: forwardedRef,
     setActive,
     setDragging,
+    setValue,
     step,
     thumbRefs,
   });
diff --git a/packages/react/src/slider/control/useSliderControl.ts b/packages/react/src/slider/control/useSliderControl.ts
index ef6fd13269..a2b38bbe6a 100644
--- a/packages/react/src/slider/control/useSliderControl.ts
+++ b/packages/react/src/slider/control/useSliderControl.ts
@@ -49,14 +49,15 @@ export function useSliderControl(
     disabled,
     dragging,
     getFingerState,
-    setValue,
-    onValueCommitted,
+    lastChangedValueRef,
     minStepsBetweenValues,
+    onValueCommitted,
     percentageValues,
     registerSliderControl,
     rootRef: externalRef,
     setActive,
     setDragging,
+    setValue,
     step,
     thumbRefs,
   } = parameters;
@@ -126,9 +127,9 @@ export function useSliderControl(
 
     setActive(-1);
 
-    commitValidation(finger.value);
+    commitValidation(lastChangedValueRef.current ?? finger.value);
 
-    onValueCommitted(finger.value, nativeEvent);
+    onValueCommitted(lastChangedValueRef.current ?? finger.value, nativeEvent);
 
     touchIdRef.current = null;
 
@@ -277,13 +278,14 @@ export namespace useSliderControl {
       | 'disabled'
       | 'dragging'
       | 'getFingerState'
-      | 'setValue'
+      | 'lastChangedValueRef'
       | 'minStepsBetweenValues'
       | 'onValueCommitted'
       | 'percentageValues'
       | 'registerSliderControl'
       | 'setActive'
       | 'setDragging'
+      | 'setValue'
       | 'step'
       | 'thumbRefs'
     > {
diff --git a/packages/react/src/slider/indicator/SliderIndicator.test.tsx b/packages/react/src/slider/indicator/SliderIndicator.test.tsx
index 04eb7806f9..e37fbe7c9f 100644
--- a/packages/react/src/slider/indicator/SliderIndicator.test.tsx
+++ b/packages/react/src/slider/indicator/SliderIndicator.test.tsx
@@ -17,6 +17,7 @@ const testRootContext: SliderRootContext = {
   }),
   setValue: NOOP,
   largeStep: 10,
+  lastChangedValueRef: { current: null },
   thumbMap: new Map(),
   max: 100,
   min: 0,
diff --git a/packages/react/src/slider/root/SliderRoot.test.tsx b/packages/react/src/slider/root/SliderRoot.test.tsx
index 400faedbd0..c8200b4587 100644
--- a/packages/react/src/slider/root/SliderRoot.test.tsx
+++ b/packages/react/src/slider/root/SliderRoot.test.tsx
@@ -1293,6 +1293,44 @@ describeSkipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
         value: 4,
       });
     });
+
+    it('onValueCommitted is called with the same value as the latest onValueChange when pointerUp occurs at a different location than onValueChange', async () => {
+      const handleValueChange = spy();
+      const handleValueCommitted = spy();
+
+      await render(
+        <TestSlider
+          onValueChange={handleValueChange}
+          onValueCommitted={handleValueCommitted}
+          defaultValue={0}
+        />,
+      );
+
+      const sliderControl = screen.getByTestId('control');
+
+      stub(sliderControl, 'getBoundingClientRect').callsFake(
+        () => GETBOUNDINGCLIENTRECT_HORIZONTAL_SLIDER_RETURN_VAL,
+      );
+
+      fireEvent.pointerDown(sliderControl, {
+        buttons: 1,
+        clientX: 10,
+      });
+      fireEvent.pointerMove(sliderControl, {
+        buttons: 1,
+        clientX: 15,
+      });
+      fireEvent.pointerUp(sliderControl, {
+        buttons: 1,
+        clientX: 20,
+      });
+
+      expect(handleValueChange.callCount).to.equal(2);
+      expect(handleValueChange.args[0][0]).to.equal(10);
+      expect(handleValueChange.args[1][0]).to.equal(15);
+      expect(handleValueCommitted.callCount).to.equal(1);
+      expect(handleValueCommitted.args[0][0]).to.equal(15);
+    });
   });
 
   describe('keyboard interactions', () => {
diff --git a/packages/react/src/slider/root/SliderRoot.tsx b/packages/react/src/slider/root/SliderRoot.tsx
index b0d56ac5b0..99fbc92e14 100644
--- a/packages/react/src/slider/root/SliderRoot.tsx
+++ b/packages/react/src/slider/root/SliderRoot.tsx
@@ -288,7 +288,7 @@ SliderRoot.propTypes /* remove-proptypes */ = {
   /**
    * Callback function that is fired when the slider's value changed.
    *
-   * @param {number | number[]} value The new value.
+   * @param {number | readonly number[]} value The new value.
    * @param {Event} event The corresponding event that initiated the change.
    * You can pull out the new value by accessing `event.target.value` (any).
    * @param {number} activeThumbIndex Index of the currently moved thumb.
diff --git a/packages/react/src/slider/root/useSliderRoot.ts b/packages/react/src/slider/root/useSliderRoot.ts
index 5dcdc0687b..e667f9f939 100644
--- a/packages/react/src/slider/root/useSliderRoot.ts
+++ b/packages/react/src/slider/root/useSliderRoot.ts
@@ -145,6 +145,8 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
   const controlRef: React.RefObject<HTMLElement | null> = React.useRef(null);
   const thumbRefs = React.useRef<(HTMLElement | null)[]>([]);
 
+  const lastChangedValueRef = React.useRef<number | readonly number[] | null>(null);
+
   const [thumbMap, setThumbMap] = React.useState(
     () => new Map<Node, CompositeMetadata<ThumbMetadata> | null>(),
   );
@@ -226,6 +228,7 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
         value: { value: newValue, name },
       });
 
+      lastChangedValueRef.current = newValue;
       onValueChange(newValue, clonedEvent, thumbIndex);
     },
   );
@@ -257,8 +260,8 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
         }
         setDirty(newValue !== validityData.initialValue);
         setTouched(true);
-        commitValidation(newValue);
-        onValueCommitted(newValue, event.nativeEvent);
+        commitValidation(lastChangedValueRef.current ?? newValue);
+        onValueCommitted(lastChangedValueRef.current ?? newValue, event.nativeEvent);
       }
     },
   );
@@ -380,6 +383,7 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
       getFingerState,
       handleInputChange,
       largeStep,
+      lastChangedValueRef,
       max,
       min,
       minStepsBetweenValues,
@@ -408,6 +412,7 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
       getFingerState,
       handleInputChange,
       largeStep,
+      lastChangedValueRef,
       max,
       min,
       minStepsBetweenValues,
@@ -487,7 +492,7 @@ export namespace useSliderRoot {
     /**
      * Callback function that is fired when the slider's value changed.
      *
-     * @param {number | number[]} value The new value.
+     * @param {number | readonly number[]} value The new value.
      * @param {Event} event The corresponding event that initiated the change.
      * You can pull out the new value by accessing `event.target.value` (any).
      * @param {number} activeThumbIndex Index of the currently moved thumb.
@@ -500,7 +505,7 @@ export namespace useSliderRoot {
      * @param {Event} event The corresponding event that initiated the change.
      * **Warning**: This is a generic event not a change event.
      */
-    onValueCommitted: (value: number | number[], event: Event) => void;
+    onValueCommitted: (value: number | readonly number[], event: Event) => void;
     /**
      * The component orientation.
      * @default 'horizontal'
@@ -565,6 +570,7 @@ export namespace useSliderRoot {
      * @default 10
      */
     largeStep: number;
+    lastChangedValueRef: React.RefObject<number | readonly number[] | null>;
     /**
      * The maximum allowed value of the slider.
      */
@@ -578,7 +584,7 @@ export namespace useSliderRoot {
      */
     minStepsBetweenValues: number;
     name: string;
-    onValueCommitted: (value: number | number[], event: Event) => void;
+    onValueCommitted: (value: number | readonly number[], event: Event) => void;
     /**
      * The component orientation.
      * @default 'horizontal'
diff --git a/packages/react/src/slider/thumb/SliderThumb.test.tsx b/packages/react/src/slider/thumb/SliderThumb.test.tsx
index 55b4d7c727..1f5f1d89cd 100644
--- a/packages/react/src/slider/thumb/SliderThumb.test.tsx
+++ b/packages/react/src/slider/thumb/SliderThumb.test.tsx
@@ -17,6 +17,7 @@ const testRootContext: SliderRootContext = {
   }),
   setValue: NOOP,
   largeStep: 10,
+  lastChangedValueRef: { current: null },
   thumbMap: new Map(),
   max: 100,
   min: 0,
diff --git a/packages/react/src/slider/track/SliderTrack.test.tsx b/packages/react/src/slider/track/SliderTrack.test.tsx
index 4219709da6..3a4e003c6b 100644
--- a/packages/react/src/slider/track/SliderTrack.test.tsx
+++ b/packages/react/src/slider/track/SliderTrack.test.tsx
@@ -17,6 +17,7 @@ const testRootContext: SliderRootContext = {
   }),
   setValue: NOOP,
   largeStep: 10,
+  lastChangedValueRef: { current: null },
   thumbMap: new Map(),
   max: 100,
   min: 0,
diff --git a/packages/react/src/slider/value/SliderValue.test.tsx b/packages/react/src/slider/value/SliderValue.test.tsx
index 3d6e62f2e0..632e61484e 100644
--- a/packages/react/src/slider/value/SliderValue.test.tsx
+++ b/packages/react/src/slider/value/SliderValue.test.tsx
@@ -19,6 +19,7 @@ const testRootContext: SliderRootContext = {
   }),
   setValue: NOOP,
   largeStep: 10,
+  lastChangedValueRef: { current: null },
   thumbMap: new Map(),
   max: 100,
   min: 0,