[Slider] Modernize implementation

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

@@ -3,7 +3,7 @@
 // to cross check whether this issue would still occur in the new API
 import * as React from 'react';
 import { Slider } from '@base_ui/react/Slider';
-import { Styles } from './slider';
+import classes from './slider.module.css';
 
 export default function App() {
   const [val1, setVal1] = React.useState(80);
@@ -17,23 +17,22 @@ export default function App() {
       }}
     >
       <Slider.Root
-        className="MySlider"
+        className={classes.slider}
         value={val1}
         onValueChange={(newValue) => setVal1(newValue as number)}
         onValueCommitted={(newValue) => setVal2(newValue as number)}
       >
-        <Slider.Output className="MySlider-output" />
-        <Slider.Control className="MySlider-control">
-          <Slider.Track className="MySlider-track">
-            <Slider.Indicator className="MySlider-indicator" />
-            <Slider.Thumb className="MySlider-thumb one" />
+        <Slider.Output 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>
-      <Styles />
     </div>
   );
 }

docs/app/experiments/slider-marks.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Slider } from '@base_ui/react/Slider';
+import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
 
 const STOPS = [
   {
@@ -32,7 +33,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = Slider.useSliderContext();
+  const { direction, values } = useSliderContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (

docs/app/experiments/slider-tooltip.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useTheme } from '@mui/system';
 import { Slider } from '@base_ui/react/Slider';
 import { Tooltip } from '@base_ui/react/Tooltip';
+import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
 
 function useIsDarkMode() {
   const theme = useTheme();
@@ -73,7 +74,7 @@ export default function App() {
 
 const SliderMark = React.forwardRef(function SliderMark(props: any, ref: React.ForwardedRef<any>) {
   const { index, style, ...otherProps } = props;
-  const { percentageValues } = Slider.useSliderContext();
+  const { percentageValues } = useSliderContext();
   const isFilled = percentageValues[0] >= index * 10;
   return (
     <span

docs/app/experiments/slider.module.css

@@ -0,0 +1,99 @@
+.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 1fr;
+  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(--gray-400);
+  touch-action: none;
+}
+
+.dark .track {
+  background-color: var(--gray-700);
+}
+
+.control[data-disabled] {
+  cursor: not-allowed;
+}
+
+.indicator {
+  height: 2px;
+  border-radius: 9999px;
+  background-color: var(--gray-900);
+}
+
+.dark .indicator {
+  background-color: var(--gray-100);
+}
+
+.thumb {
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: var(--gray-900);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--gray-900);
+    outline-offset: 2px;
+  }
+
+  &[data-dragging] {
+    background-color: pink;
+  }
+
+  &[data-disabled] {
+    background-color: var(--gray-300);
+  }
+}
+
+.dark .thumb {
+  background-color: var(--gray-100);
+
+  &:focus-visible {
+    outline-color: var(--gray-300);
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-disabled] {
+    background-color: var(--gray-600);
+  }
+}
+
+.label {
+  cursor: unset;
+  font-weight: bold;
+}
+
+.label[data-disabled='true'] {
+  color: var(--gray-600);
+}