https://github.com/mui/material-ui/issues/41739

docs/pages/experiments/slider-change-committed-lag.tsx

@@ -0,0 +1,143 @@
+// 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 * as Slider from '@base_ui/react/Slider2';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
+
+function TrackFillSingleThumb(props: any) {
+  const { value: values, min, max } = useSliderContext('Track');
+  const value = values[0];
+  const { style, ...otherProps } = props;
+  const percent = valueToPercent(value, min, max);
+
+  return (
+    <span
+      {...otherProps}
+      style={{
+        width: `${percent}%`,
+        zIndex: 1,
+        ...style,
+      }}
+    />
+  );
+}
+
+export default function App() {
+  const [val1, setVal1] = React.useState(80);
+  const [val2, setVal2] = React.useState<number | null>(null);
+
+  return (
+    <div className="SliderDemo">
+      <Slider.Root
+        className="MySlider"
+        value={val1}
+        render={<span />}
+        onValueChange={(newValue) => setVal1(newValue as number)}
+        onValueCommitted={(newValue) => setVal2(newValue as number)}
+      >
+        <Slider.Output className="MySlider-output" />
+        <Slider.Track className="MySlider-track">
+          <TrackFillSingleThumb className="MySlider-track-fill" />
+          <Slider.Thumb className="MySlider-thumb one" />
+        </Slider.Track>
+      </Slider.Root>
+
+      <pre>onValueChange value: {val1}</pre>
+      <pre>onValueCommitted value: {val2}</pre>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function Styles() {
+  const isDarkMode = false;
+  return (
+    <style>{`
+    .SliderDemo {
+      font-family: system-ui, sans-serif;
+      width: 640px;
+    }
+
+    .MySlider {
+      width: 100%;
+      margin: 1rem 0 3rem;
+      align-items: center;
+      position: relative;
+      -webkit-tap-highlight-color: transparent;
+      display: grid;
+      grid-auto-rows: 1.5rem auto;
+      grid-gap: 1rem;
+    }
+
+    .MySlider-output {
+      text-align: right;
+      font-size: .875rem;
+    }
+
+    .MySlider-track {
+      display: flex;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 2px;
+      border-radius: 9999px;
+      background-color: gainsboro;
+      touch-action: none;
+    }
+
+    .MySlider-track-fill {
+      display: block;
+      position: absolute;
+      height: 100%;
+      border-radius: 9999px;
+      background-color: black;
+    }
+
+    .MySlider-thumb {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      box-sizing: border-box;
+      border-radius: 50%;
+      background-color: black;
+      transform: translateX(-50%);
+      touch-action: none;
+    }
+
+    .MySlider-thumb:focus-within {
+      outline: 2px solid black;
+      outline-offset: 2px;
+    }
+
+    .MySlider-thumb[data-active] {
+      background-color: pink;
+    }
+
+    .MySlider-thumb:has(input:disabled) {
+      background-color: ${isDarkMode ? grey[600] : grey[300]};
+    }
+
+    .MySlider[data-disabled] {
+      cursor: not-allowed;
+    }
+
+    .SliderDemo pre {
+      font-size: 1rem;
+    }
+    `}</style>
+  );
+}