diff --git a/docs/data/base/components/slider/CustomSubcomponents.js b/docs/data/base/components/slider/CustomSubcomponents.js
new file mode 100644
index 0000000000..111e80079b
--- /dev/null
+++ b/docs/data/base/components/slider/CustomSubcomponents.js
@@ -0,0 +1,301 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
+import * as Tooltip from '@base_ui/react/Tooltip';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function CustomSubcomponents() {
+  const [valueLabelOpen, setValueLabelOpen] = React.useState(false);
+
+  const handleGlobalPointerUp = () => {
+    if (valueLabelOpen) {
+      setValueLabelOpen(false);
+    }
+  };
+
+  return (
+    <div className="App">
+      <Slider.Root className="JoySlider" defaultValue={40}>
+        <Slider.Track className="JoySlider-track">
+          <SliderTrackFill className="JoySlider-track-fill" />
+          {Array.from(Array(10), (_, x) => x).map((v) => {
+            return <SliderMark key={v} index={v} className="JoySlider-mark" />;
+          })}
+          <Tooltip.Root delay={0} open={valueLabelOpen}>
+            <Slider.Thumb
+              className="JoySlider-thumb"
+              onFocus={() => {
+                if (!valueLabelOpen) {
+                  setValueLabelOpen(true);
+                }
+              }}
+              onBlur={() => {
+                if (valueLabelOpen) {
+                  setValueLabelOpen(false);
+                }
+              }}
+              onPointerOver={() => {
+                if (!valueLabelOpen) {
+                  setValueLabelOpen(true);
+                }
+              }}
+              onPointerLeave={(event) => {
+                if (event.buttons !== 1) {
+                  setValueLabelOpen(false);
+                } else {
+                  document.addEventListener('pointerup', handleGlobalPointerUp, {
+                    once: true,
+                  });
+                }
+              }}
+            >
+              <Tooltip.Trigger className="SliderTooltip-trigger" />
+            </Slider.Thumb>
+            <Tooltip.Positioner sideOffset={10} alignment="center">
+              <Tooltip.Popup
+                className="SliderTooltip-popup"
+                data-open={String(valueLabelOpen)}
+              >
+                <Slider.Output />
+                <Tooltip.Arrow className="SliderTooltip-arrow" />
+              </Tooltip.Popup>
+            </Tooltip.Positioner>
+          </Tooltip.Root>
+        </Slider.Track>
+      </Slider.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const SliderMark = React.forwardRef(function SliderMark(props, ref) {
+  const { index, style, ...otherProps } = props;
+  const { percentageValues } = Slider.useSliderContext();
+  const isFilled = percentageValues[0] >= index * 10;
+  return (
+    <span
+      ref={ref}
+      data-mark-active={String(isFilled)}
+      style={{
+        ...style,
+        left: `${(100 / 10) * (index + 0)}%`,
+        visibility: index === 0 ? 'hidden' : 'inherit',
+      }}
+      {...otherProps}
+    />
+  );
+});
+
+const SliderTrackFill = React.forwardRef(function SliderTrackFill(props, ref) {
+  const { style, ...otherProps } = props;
+
+  const { axis, disabled, isRtl, orientation, percentageValues } =
+    Slider.useSliderContext();
+
+  const isRange = percentageValues.length > 1;
+
+  let internalStyles;
+
+  if (isRange) {
+    const trackOffset = percentageValues[0];
+    const trackLeap = percentageValues[percentageValues.length - 1] - trackOffset;
+    internalStyles = getRangeStyles(axis, trackOffset, trackLeap);
+  } else if (orientation === 'vertical') {
+    internalStyles = {
+      bottom: 0,
+      height: `${percentageValues[0]}%`,
+    };
+  } else {
+    internalStyles = {
+      width: `${percentageValues[0]}%`,
+      [isRtl ? 'right' : 'left']: 0,
+    };
+  }
+
+  return (
+    <span
+      data-disabled={disabled}
+      ref={ref}
+      style={{
+        ...internalStyles,
+        ...style,
+      }}
+      {...otherProps}
+    />
+  );
+});
+
+function getRangeStyles(axis, trackOffset, trackLeap) {
+  const axisProps = {
+    horizontal: {
+      offset: (percent) => ({ left: `${percent}%` }),
+      leap: (percent) => ({ width: `${percent}%` }),
+    },
+    'horizontal-reverse': {
+      offset: (percent) => ({ right: `${percent}%` }),
+      leap: (percent) => ({ width: `${percent}%` }),
+    },
+    vertical: {
+      offset: (percent) => ({ bottom: `${percent}%` }),
+      leap: (percent) => ({ height: `${percent}%` }),
+    },
+  };
+
+  return {
+    ...axisProps[axis].offset(trackOffset),
+    ...axisProps[axis].leap(trackLeap),
+  };
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style suppressHydrationWarning>
+      {`
+        .App {
+          width: 20rem;
+          padding: 1rem;
+        }
+
+        .JoySlider {
+          width: 100%;
+          margin: 16px 0;
+          position: relative;
+          -webkit-tap-highlight-color: transparent;
+        }
+
+        .JoySlider-track {
+          display: flex;
+          align-items: center;
+          position: relative;
+          width: 100%;
+          height: 16px;
+          border-radius: 9999px;
+          touch-action: none;
+          margin-top: 2rem;
+        }
+
+        .JoySlider-track:hover {
+          cursor: pointer;
+        }
+
+        .JoySlider-track::before {
+          content: '';
+          width: 100%;
+          height: 6px;
+          border-radius: 9999px;
+          touch-action: none;
+          background-color: ${isDarkMode ? '#dde7ee' : '#32383e'};
+        }
+
+        .JoySlider-track-fill {
+          display: block;
+          position: absolute;
+          height: 6px;
+          border-radius: 9999px;
+          background-color: #0b6bcb;
+        }
+
+        .JoySlider-mark {
+          position: absolute;
+          height: 6px;
+          width: 6px;
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: center;
+          align-items: center;
+          transform: translateX(-50%);
+        }
+
+        .JoySlider-mark::before {
+          content: '';
+          display: inline-block;
+          width: 2px;
+          height: 2px;
+          border-radius: 2px;
+          background-color: ${isDarkMode ? '#9fa6ad' : '#555e68'};
+        }
+
+        .JoySlider-mark[data-mark-active='true']::before {
+          background-color: white;
+        }
+
+        .JoySlider-thumb {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          background-color: #fefefe;
+          transform: translateX(-50%);
+          touch-action: none;
+        }
+
+        .JoySlider-thumb::before {
+          position: absolute;
+          content: '';
+          box-sizing: border-box;
+          border: 2px solid #0b6bcb;
+          border-radius: inherit;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        .JoySlider-thumb[data-dragging],
+        .JoySlider-thumb:focus-visible {
+          outline-offset: 0;
+          outline: 2px solid #0b6bcb;
+          outline-width: max(4px, 18px / 3.6);
+          outline-color: color-mix(in srgb, #0b6bcb 32%, transparent);
+        }
+
+        .SliderTooltip-trigger {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 0;
+          border-radius: 9999px;
+          opacity: 0;
+          cursor: pointer;
+        }
+
+        .SliderTooltip-popup {
+          font-family: system-ui, sans-serif;
+          font-size: .875rem;
+          line-height: 1.5;
+          background-color: #636B74;
+          color: white;
+          padding-inline: .375rem;
+          border-radius: 2px;
+          opacity: 0;
+        }
+
+        .SliderTooltip-popup[data-open='true'] {
+          opacity: 1;
+        }
+
+        .SliderTooltip-arrow {
+          color: #555e68;
+          bottom: 0;
+          border: 4px solid;
+          border-color: currentColor;
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+          border-left-color: transparent;
+          left: 50%;
+          transform: translateY(100%);
+          background-color: transparent;
+        }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/slider/CustomSubcomponents.tsx b/docs/data/base/components/slider/CustomSubcomponents.tsx
new file mode 100644
index 0000000000..4e576425c9
--- /dev/null
+++ b/docs/data/base/components/slider/CustomSubcomponents.tsx
@@ -0,0 +1,314 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
+import * as Tooltip from '@base_ui/react/Tooltip';
+import { type Axis } from '@base_ui/react/Slider';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function CustomSubcomponents() {
+  const [valueLabelOpen, setValueLabelOpen] = React.useState(false);
+
+  const handleGlobalPointerUp = () => {
+    if (valueLabelOpen) {
+      setValueLabelOpen(false);
+    }
+  };
+
+  return (
+    <div className="App">
+      <Slider.Root className="JoySlider" defaultValue={40}>
+        <Slider.Track className="JoySlider-track">
+          <SliderTrackFill className="JoySlider-track-fill" />
+          {Array.from(Array(10), (_, x) => x).map((v) => {
+            return <SliderMark key={v} index={v} className="JoySlider-mark" />;
+          })}
+          <Tooltip.Root delay={0} open={valueLabelOpen}>
+            <Slider.Thumb
+              className="JoySlider-thumb"
+              onFocus={() => {
+                if (!valueLabelOpen) {
+                  setValueLabelOpen(true);
+                }
+              }}
+              onBlur={() => {
+                if (valueLabelOpen) {
+                  setValueLabelOpen(false);
+                }
+              }}
+              onPointerOver={() => {
+                if (!valueLabelOpen) {
+                  setValueLabelOpen(true);
+                }
+              }}
+              onPointerLeave={(event) => {
+                if (event.buttons !== 1) {
+                  setValueLabelOpen(false);
+                } else {
+                  document.addEventListener('pointerup', handleGlobalPointerUp, {
+                    once: true,
+                  });
+                }
+              }}
+            >
+              <Tooltip.Trigger className="SliderTooltip-trigger" />
+            </Slider.Thumb>
+            <Tooltip.Positioner sideOffset={10} alignment="center">
+              <Tooltip.Popup
+                className="SliderTooltip-popup"
+                data-open={String(valueLabelOpen)}
+              >
+                <Slider.Output />
+                <Tooltip.Arrow className="SliderTooltip-arrow" />
+              </Tooltip.Popup>
+            </Tooltip.Positioner>
+          </Tooltip.Root>
+        </Slider.Track>
+      </Slider.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const SliderMark = React.forwardRef(function SliderMark(
+  props: any,
+  ref: React.ForwardedRef<any>,
+) {
+  const { index, style, ...otherProps } = props;
+  const { percentageValues } = Slider.useSliderContext();
+  const isFilled = percentageValues[0] >= index * 10;
+  return (
+    <span
+      ref={ref}
+      data-mark-active={String(isFilled)}
+      style={{
+        ...style,
+        left: `${(100 / 10) * (index + 0)}%`,
+        visibility: index === 0 ? 'hidden' : 'inherit',
+      }}
+      {...otherProps}
+    />
+  );
+});
+
+const SliderTrackFill = React.forwardRef(function SliderTrackFill(
+  props: any,
+  ref: React.ForwardedRef<any>,
+) {
+  const { style, ...otherProps } = props;
+
+  const { axis, disabled, isRtl, orientation, percentageValues } =
+    Slider.useSliderContext();
+
+  const isRange = percentageValues.length > 1;
+
+  let internalStyles;
+
+  if (isRange) {
+    const trackOffset = percentageValues[0];
+    const trackLeap = percentageValues[percentageValues.length - 1] - trackOffset;
+    internalStyles = getRangeStyles(axis, trackOffset, trackLeap);
+  } else if (orientation === 'vertical') {
+    internalStyles = {
+      bottom: 0,
+      height: `${percentageValues[0]}%`,
+    };
+  } else {
+    internalStyles = {
+      width: `${percentageValues[0]}%`,
+      [isRtl ? 'right' : 'left']: 0,
+    };
+  }
+
+  return (
+    <span
+      data-disabled={disabled}
+      ref={ref}
+      style={{
+        ...internalStyles,
+        ...style,
+      }}
+      {...otherProps}
+    />
+  );
+});
+
+function getRangeStyles(axis: Axis, trackOffset: number, trackLeap: number) {
+  const axisProps: Record<
+    Axis,
+    {
+      offset: (percent: number) => Record<string, string>;
+      leap: (percent: number) => Record<string, string>;
+    }
+  > = {
+    horizontal: {
+      offset: (percent: number) => ({ left: `${percent}%` }),
+      leap: (percent: number) => ({ width: `${percent}%` }),
+    },
+    'horizontal-reverse': {
+      offset: (percent: number) => ({ right: `${percent}%` }),
+      leap: (percent: number) => ({ width: `${percent}%` }),
+    },
+    vertical: {
+      offset: (percent: number) => ({ bottom: `${percent}%` }),
+      leap: (percent: number) => ({ height: `${percent}%` }),
+    },
+  };
+
+  return {
+    ...axisProps[axis].offset(trackOffset),
+    ...axisProps[axis].leap(trackLeap),
+  };
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style suppressHydrationWarning>
+      {`
+        .App {
+          width: 20rem;
+          padding: 1rem;
+        }
+
+        .JoySlider {
+          width: 100%;
+          margin: 16px 0;
+          position: relative;
+          -webkit-tap-highlight-color: transparent;
+        }
+
+        .JoySlider-track {
+          display: flex;
+          align-items: center;
+          position: relative;
+          width: 100%;
+          height: 16px;
+          border-radius: 9999px;
+          touch-action: none;
+          margin-top: 2rem;
+        }
+
+        .JoySlider-track:hover {
+          cursor: pointer;
+        }
+
+        .JoySlider-track::before {
+          content: '';
+          width: 100%;
+          height: 6px;
+          border-radius: 9999px;
+          touch-action: none;
+          background-color: ${isDarkMode ? '#dde7ee' : '#32383e'};
+        }
+
+        .JoySlider-track-fill {
+          display: block;
+          position: absolute;
+          height: 6px;
+          border-radius: 9999px;
+          background-color: #0b6bcb;
+        }
+
+        .JoySlider-mark {
+          position: absolute;
+          height: 6px;
+          width: 6px;
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: center;
+          align-items: center;
+          transform: translateX(-50%);
+        }
+
+        .JoySlider-mark::before {
+          content: '';
+          display: inline-block;
+          width: 2px;
+          height: 2px;
+          border-radius: 2px;
+          background-color: ${isDarkMode ? '#9fa6ad' : '#555e68'};
+        }
+
+        .JoySlider-mark[data-mark-active='true']::before {
+          background-color: white;
+        }
+
+        .JoySlider-thumb {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          background-color: #fefefe;
+          transform: translateX(-50%);
+          touch-action: none;
+        }
+
+        .JoySlider-thumb::before {
+          position: absolute;
+          content: '';
+          box-sizing: border-box;
+          border: 2px solid #0b6bcb;
+          border-radius: inherit;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        .JoySlider-thumb[data-dragging],
+        .JoySlider-thumb:focus-visible {
+          outline-offset: 0;
+          outline: 2px solid #0b6bcb;
+          outline-width: max(4px, 18px / 3.6);
+          outline-color: color-mix(in srgb, #0b6bcb 32%, transparent);
+        }
+
+        .SliderTooltip-trigger {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 0;
+          border-radius: 9999px;
+          opacity: 0;
+          cursor: pointer;
+        }
+
+        .SliderTooltip-popup {
+          font-family: system-ui, sans-serif;
+          font-size: .875rem;
+          line-height: 1.5;
+          background-color: #636B74;
+          color: white;
+          padding-inline: .375rem;
+          border-radius: 2px;
+          opacity: 0;
+        }
+
+        .SliderTooltip-popup[data-open='true'] {
+          opacity: 1;
+        }
+
+        .SliderTooltip-arrow {
+          color: #555e68;
+          bottom: 0;
+          border: 4px solid;
+          border-color: currentColor;
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+          border-left-color: transparent;
+          left: 50%;
+          transform: translateY(100%);
+          background-color: transparent;
+        }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js
deleted file mode 100644
index 77113b3adc..0000000000
--- a/docs/data/base/components/slider/DiscreteSlider.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function DiscreteSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider
-        aria-label="Temperature"
-        defaultValue={30}
-        getAriaValueText={valuetext}
-        shiftStep={30}
-        step={10}
-        marks
-        min={10}
-        max={110}
-        slots={{ valueLabel: SliderValueLabel }}
-      />
-    </Box>
-  );
-}
-
-function SliderValueLabel({ children }) {
-  return <span className="valueLabel">{children}</span>;
-}
-
-SliderValueLabel.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[700]};
-    transform: translateX(-50%);
-  }
-
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  }
-
-  & .valueLabel {
-    font-family: IBM Plex Sans;
-    font-weight: 600;
-    font-size: 12px;
-    position: relative;
-    top: -2em;
-    text-align: center;
-    align-self: center;
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx
deleted file mode 100644
index 54d3605561..0000000000
--- a/docs/data/base/components/slider/DiscreteSlider.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function DiscreteSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider
-        aria-label="Temperature"
-        defaultValue={30}
-        getAriaValueText={valuetext}
-        shiftStep={30}
-        step={10}
-        marks
-        min={10}
-        max={110}
-        slots={{ valueLabel: SliderValueLabel }}
-      />
-    </Box>
-  );
-}
-
-interface SliderValueLabelProps {
-  children: React.ReactElement;
-}
-
-function SliderValueLabel({ children }: SliderValueLabelProps) {
-  return <span className="valueLabel">{children}</span>;
-}
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[700]};
-    transform: translateX(-50%);
-  }
-
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  }
-
-  & .valueLabel {
-    font-family: IBM Plex Sans;
-    font-weight: 600;
-    font-size: 12px;
-    position: relative;
-    top: -2em;
-    text-align: center;
-    align-self: center;
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx.preview b/docs/data/base/components/slider/DiscreteSlider.tsx.preview
deleted file mode 100644
index 1d0ad0d7b2..0000000000
--- a/docs/data/base/components/slider/DiscreteSlider.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-<Slider
-  aria-label="Temperature"
-  defaultValue={30}
-  getAriaValueText={valuetext}
-  shiftStep={30}
-  step={10}
-  marks
-  min={10}
-  max={110}
-  slots={{ valueLabel: SliderValueLabel }}
-/>
\ No newline at end of file
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js
deleted file mode 100644
index a1ea9df512..0000000000
--- a/docs/data/base/components/slider/DiscreteSliderMarks.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function DiscreteSliderMarks() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        marks={marks}
-      />
-    </Box>
-  );
-}
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
-    transform: translateX(-50%);
-  }
-
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  }
-
-  & .${sliderClasses.markLabel} {
-    font-family: IBM Plex Sans;
-    font-weight: 600;
-    font-size: 12px;
-    position: absolute;
-    top: 24px;
-    transform: translateX(-50%);
-    margin-top: 8px;
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
deleted file mode 100644
index 973e349951..0000000000
--- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function DiscreteSliderMarks() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        marks={marks}
-      />
-    </Box>
-  );
-}
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
-    transform: translateX(-50%);
-  }
-
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  }
-
-  & .${sliderClasses.markLabel} {
-    font-family: IBM Plex Sans;
-    font-weight: 600;
-    font-size: 12px;
-    position: absolute;
-    top: 24px;
-    transform: translateX(-50%);
-    margin-top: 8px;
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview b/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview
deleted file mode 100644
index 32bef2b878..0000000000
--- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-<Slider
-  aria-label="Temperature"
-  defaultValue={37}
-  getAriaValueText={valuetext}
-  marks={marks}
-/>
\ No newline at end of file
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js
deleted file mode 100644
index ac0cb96228..0000000000
--- a/docs/data/base/components/slider/DiscreteSliderValues.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function DiscreteSliderValues() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        step={null}
-        marks={marks}
-      />
-    </Box>
-  );
-}
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-  
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
-    transform: translateX(-50%);
-  }
-
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  }
-
-  & .${sliderClasses.markLabel} {
-    font-family: IBM Plex Sans;
-    font-weight: 600;
-    font-size: 12px;
-    position: absolute;
-    top: 24px;
-    transform: translateX(-50%);
-    margin-top: 8px;
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx
deleted file mode 100644
index 3da423aaee..0000000000
--- a/docs/data/base/components/slider/DiscreteSliderValues.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function DiscreteSliderValues() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        step={null}
-        marks={marks}
-      />
-    </Box>
-  );
-}
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-  
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
-    transform: translateX(-50%);
-  }
-
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  }
-
-  & .${sliderClasses.markLabel} {
-    font-family: IBM Plex Sans;
-    font-weight: 600;
-    font-size: 12px;
-    position: absolute;
-    top: 24px;
-    transform: translateX(-50%);
-    margin-top: 8px;
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview b/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview
deleted file mode 100644
index f5e963865b..0000000000
--- a/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview
+++ /dev/null
@@ -1,7 +0,0 @@
-<Slider
-  aria-label="Temperature"
-  defaultValue={37}
-  getAriaValueText={valuetext}
-  step={null}
-  marks={marks}
-/>
\ No newline at end of file
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
deleted file mode 100644
index 17c2fd45ff..0000000000
--- a/docs/data/base/components/slider/LabeledValuesSlider.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function LabeledValuesSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
-    </Box>
-  );
-}
-
-function SliderValueLabel({ children }) {
-  return (
-    <span className="label">
-      <div className="value">{children}</div>
-    </span>
-  );
-}
-
-SliderValueLabel.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-    & .label {
-      font-family: IBM Plex Sans;
-      font-weight: 600;
-      font-size: 14px;
-      background: unset;
-      background-color: ${theme.palette.mode === 'light' ? blue[600] : blue[900]};
-      width: 32px;
-      height: 32px;
-      padding: 0px;
-      visibility: hidden;
-      color: #fff;
-      border-radius: 50% 50% 50% 0;
-      position: absolute;
-      transform: translate(0%, -140%) rotate(-45deg) scale(0);
-      transition: transform 0.2s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    :hover .label {
-      visibility: visible;
-      transform: translate(0%, -140%) rotate(-45deg) scale(1);
-    }
-
-    :hover .value {
-      transform: rotate(45deg);
-      text-align: center;
-    }
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
deleted file mode 100644
index fe5a7462a8..0000000000
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-
-export default function LabeledValuesSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
-    </Box>
-  );
-}
-
-interface SliderValueLabelProps {
-  children: React.ReactElement;
-}
-
-function SliderValueLabel({ children }: SliderValueLabelProps) {
-  return (
-    <span className="label">
-      <div className="value">{children}</div>
-    </span>
-  );
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
-  width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
-
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
-  }
-
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-  }
-
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-  }
-
-    & .label {
-      font-family: IBM Plex Sans;
-      font-weight: 600;
-      font-size: 14px;
-      background: unset;
-      background-color: ${theme.palette.mode === 'light' ? blue[600] : blue[900]};
-      width: 32px;
-      height: 32px;
-      padding: 0px;
-      visibility: hidden;
-      color: #fff;
-      border-radius: 50% 50% 50% 0;
-      position: absolute;
-      transform: translate(0%, -140%) rotate(-45deg) scale(0);
-      transition: transform 0.2s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    :hover .label {
-      visibility: visible;
-      transform: translate(0%, -140%) rotate(-45deg) scale(1);
-    }
-
-    :hover .value {
-      transform: rotate(45deg);
-      text-align: center;
-    }
-  }
-`,
-);
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx.preview b/docs/data/base/components/slider/LabeledValuesSlider.tsx.preview
deleted file mode 100644
index ab77eaafc1..0000000000
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<Slider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
\ No newline at end of file
diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js
index dc8b7d413e..2fcc7926fe 100644
--- a/docs/data/base/components/slider/RangeSlider.js
+++ b/docs/data/base/components/slider/RangeSlider.js
@@ -1,52 +1,43 @@
 import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
+import { styled, useTheme, Box } from '@mui/system';
+import * as BaseSlider from '@base_ui/react/Slider';
 
 export default function RangeSlider() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   const [value, setValue] = React.useState([20, 37]);
 
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
   return (
-    <Box sx={{ width: 300 }}>
+    <Box
+      className={isDarkMode ? 'dark' : ''}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
       {/* controlled: */}
       <Slider
         value={value}
-        onChange={handleChange}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
+        onValueChange={setValue}
+        aria-labelledby="ControlledRangeLabel"
+      >
+        <Label id="ControlledRangeLabel">Controlled Range</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
       {/* uncontrolled: */}
-      <Slider
-        defaultValue={[20, 37]}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
+      <Slider defaultValue={[20, 37]} aria-labelledby="UncontrolledRangeLabel">
+        <Label id="UncontrolledRangeLabel">Uncontrolled Range</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
     </Box>
   );
 }
 
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
 const grey = {
   50: '#F3F6F9',
   100: '#E5EAF2',
@@ -60,98 +51,102 @@ const grey = {
   900: '#1C2025',
 };
 
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
   width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
   align-items: center;
   position: relative;
-  cursor: pointer;
-  touch-action: none;
   -webkit-tap-highlight-color: transparent;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
+`;
+
+const SliderOutput = styled(BaseSlider.Output)`
+  text-align: right;
+`;
+
+const SliderTrack = styled(BaseSlider.Track)`
+  grid-column: 1/3;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 9999px;
+  touch-action: none;
 
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
+  &::before {
+    content: '';
+    width: 100%;
+    height: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
   }
 
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .dark &::before {
+    background-color: ${grey[700]};
+  }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(-50%);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
   }
 
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
   }
 
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
+  &[data-dragging='true'] {
+    background-color: pink;
   }
 
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
-    top: 44%;
-    transform: translateX(-50%);
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
   }
 
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+// we can't use a <label> element in a range slider since the `for` attribute
+// cannot reference more than one <input> element
+// instead we use a span and rely on
+const Label = styled('span')`
+  cursor: unset;
+  font-weight: bold;
+
+  &[data-disabled='true'] {
+    color: ${grey[600]};
   }
-`,
-);
+`;
diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx
index 46fb1ddd4f..bb66b43856 100644
--- a/docs/data/base/components/slider/RangeSlider.tsx
+++ b/docs/data/base/components/slider/RangeSlider.tsx
@@ -1,52 +1,43 @@
 import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
+import { styled, useTheme, Box } from '@mui/system';
+import * as BaseSlider from '@base_ui/react/Slider';
 
 export default function RangeSlider() {
-  const [value, setValue] = React.useState<number[]>([20, 37]);
-
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number[]);
-  };
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  const [value, setValue] = React.useState<number | number[]>([20, 37]);
 
   return (
-    <Box sx={{ width: 300 }}>
+    <Box
+      className={isDarkMode ? 'dark' : ''}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
       {/* controlled: */}
       <Slider
         value={value}
-        onChange={handleChange}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
+        onValueChange={setValue}
+        aria-labelledby="ControlledRangeLabel"
+      >
+        <Label id="ControlledRangeLabel">Controlled Range</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
       {/* uncontrolled: */}
-      <Slider
-        defaultValue={[20, 37]}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
+      <Slider defaultValue={[20, 37]} aria-labelledby="UncontrolledRangeLabel">
+        <Label id="UncontrolledRangeLabel">Uncontrolled Range</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
     </Box>
   );
 }
 
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
-
 const grey = {
   50: '#F3F6F9',
   100: '#E5EAF2',
@@ -60,98 +51,102 @@ const grey = {
   900: '#1C2025',
 };
 
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 6px;
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
   width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
   align-items: center;
   position: relative;
-  cursor: pointer;
-  touch-action: none;
   -webkit-tap-highlight-color: transparent;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
+`;
+
+const SliderOutput = styled(BaseSlider.Output)`
+  text-align: right;
+`;
+
+const SliderTrack = styled(BaseSlider.Track)`
+  grid-column: 1/3;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 9999px;
+  touch-action: none;
 
-  &.${sliderClasses.disabled} {
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
+  &::before {
+    content: '';
+    width: 100%;
+    height: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
   }
 
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .dark &::before {
+    background-color: ${grey[700]};
+  }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(-50%);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
   }
 
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
   }
 
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
+  &[data-dragging='true'] {
+    background-color: pink;
   }
 
-  & .${sliderClasses.mark} {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 99%;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
-    top: 44%;
-    transform: translateX(-50%);
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
   }
 
-  & .${sliderClasses.markActive} {
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+// we can't use a <label> element in a range slider since the `for` attribute
+// cannot reference more than one <input> element
+// instead we use a span and rely on
+const Label = styled('span')`
+  cursor: unset;
+  font-weight: bold;
+
+  &[data-disabled='true'] {
+    color: ${grey[600]};
   }
-`,
-);
+`;
diff --git a/docs/data/base/components/slider/RtlSlider.js b/docs/data/base/components/slider/RtlSlider.js
new file mode 100644
index 0000000000..65b5e7f9bc
--- /dev/null
+++ b/docs/data/base/components/slider/RtlSlider.js
@@ -0,0 +1,149 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import * as BaseSlider from '@base_ui/react/Slider';
+import { styled, useTheme, Box } from '@mui/system';
+
+export default function RtlSlider() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <Box className={isDarkMode ? 'dark' : ''} sx={{ width: 320, margin: '32px' }}>
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" isRtl>
+        <Label id="VolumeSliderLabel">Volume (RTL)</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+    </Box>
+  );
+}
+
+function BaseLabel(props) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
+
+BaseLabel.propTypes = {
+  id: PropTypes.string,
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  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;
+  grid-gap: 1rem;
+`;
+
+const SliderOutput = styled(BaseSlider.Output)`
+  text-align: left;
+`;
+
+const SliderTrack = styled(BaseSlider.Track)`
+  grid-column: 1/3;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 9999px;
+  touch-action: none;
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .dark &::before {
+    background-color: ${grey[700]};
+  }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(50%);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
+  }
+
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-dragging='true'] {
+    background-color: pink;
+  }
+
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
+  }
+
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+const Label = styled(BaseLabel)`
+  cursor: unset;
+  font-weight: bold;
+
+  &[data-disabled='true'] {
+    color: ${grey[600]};
+  }
+`;
diff --git a/docs/data/base/components/slider/RtlSlider.tsx b/docs/data/base/components/slider/RtlSlider.tsx
new file mode 100644
index 0000000000..643d89feda
--- /dev/null
+++ b/docs/data/base/components/slider/RtlSlider.tsx
@@ -0,0 +1,144 @@
+import * as React from 'react';
+import * as BaseSlider from '@base_ui/react/Slider';
+import { styled, useTheme, Box } from '@mui/system';
+
+export default function RtlSlider() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <Box className={isDarkMode ? 'dark' : ''} sx={{ width: 320, margin: '32px' }}>
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" isRtl>
+        <Label id="VolumeSliderLabel">Volume (RTL)</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+    </Box>
+  );
+}
+
+function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  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;
+  grid-gap: 1rem;
+`;
+
+const SliderOutput = styled(BaseSlider.Output)`
+  text-align: left;
+`;
+
+const SliderTrack = styled(BaseSlider.Track)`
+  grid-column: 1/3;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 9999px;
+  touch-action: none;
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .dark &::before {
+    background-color: ${grey[700]};
+  }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(50%);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
+  }
+
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-dragging='true'] {
+    background-color: pink;
+  }
+
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
+  }
+
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+const Label = styled(BaseLabel)`
+  cursor: unset;
+  font-weight: bold;
+
+  &[data-disabled='true'] {
+    color: ${grey[600]};
+  }
+`;
diff --git a/docs/data/base/components/slider/RtlSlider.tsx.preview b/docs/data/base/components/slider/RtlSlider.tsx.preview
new file mode 100644
index 0000000000..1ef29eab06
--- /dev/null
+++ b/docs/data/base/components/slider/RtlSlider.tsx.preview
@@ -0,0 +1,7 @@
+<Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" isRtl>
+  <Label id="VolumeSliderLabel">Volume (RTL)</Label>
+  <SliderOutput />
+  <SliderTrack>
+    <SliderThumb />
+  </SliderTrack>
+</Slider>
\ No newline at end of file
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
index 1a50dc6d87..04cb7d1039 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
@@ -1,45 +1,66 @@
 import * as React from 'react';
-import { useTheme, alpha } from '@mui/system';
-import { Slider, sliderClasses } from '@base_ui/react/v5_Slider';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
-    <div style={{ width: 320 }}>
-      <Slider
-        slotProps={{
-          root: { className: 'CustomSlider' },
-          rail: { className: 'CustomSlider-rail' },
-          track: { className: 'CustomSlider-track' },
-          thumb: { className: 'CustomSlider-thumb' },
-        }}
+    <div
+      className={isDarkMode ? 'dark' : ''}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
+      <Slider.Root
+        className="Slider"
         defaultValue={50}
-      />
-      <Slider
-        slotProps={{
-          root: { className: 'CustomSlider' },
-          rail: { className: 'CustomSlider-rail' },
-          track: { className: 'CustomSlider-track' },
-          thumb: { className: 'CustomSlider-thumb' },
-        }}
+        aria-labelledby="VolumeSliderLabel"
+      >
+        <Label id="VolumeSliderLabel" className="Slider-label">
+          Volume
+        </Label>
+        <Slider.Output className="Slider-output" />
+        <Slider.Track className="Slider-track">
+          <Slider.Thumb className="Slider-thumb" />
+        </Slider.Track>
+      </Slider.Root>
+
+      <Slider.Root
+        className="Slider"
         defaultValue={30}
+        aria-labelledby="BrightnessSliderLabel"
         disabled
-      />
+      >
+        <Label id="BrightnessSliderLabel" className="Slider-label">
+          Brightness
+        </Label>
+        <Slider.Output className="Slider-output" />
+        <Slider.Track className="Slider-track">
+          <Slider.Thumb className="Slider-thumb" />
+        </Slider.Track>
+      </Slider.Root>
       <Styles />
     </div>
   );
 }
 
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
+function Label(props) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = Slider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
+
+Label.propTypes = {
+  id: PropTypes.string,
 };
 
 const grey = {
@@ -61,84 +82,79 @@ function useIsDarkMode() {
 }
 
 function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
   return (
-    <style>{`
-    .CustomSlider {
-      color: ${isDarkMode ? cyan[300] : cyan[500]};
-      height: 4px;
+    <style suppressHydrationWarning>{`
+    .Slider {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-size: 1rem;
       width: 100%;
-      padding: 16px 0;
-      display: inline-flex;
       align-items: center;
       position: relative;
-      cursor: pointer;
-      touch-action: none;
       -webkit-tap-highlight-color: transparent;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 1rem;
     }
 
-    .CustomSlider.${sliderClasses.disabled} { 
-      pointer-events: none;
-      cursor: default;
-      color: ${isDarkMode ? grey[600] : grey[300]};
-      opacity: 0.4;
-      outline: none;
+    .Slider-output {
+      text-align: right;
     }
 
-    .CustomSlider-rail {
-      display: block;
-      position: absolute;
+    .Slider-track {
+      grid-column: 1/3;
+      display: flex;
+      align-items: center;
+      position: relative;
       width: 100%;
-      height: 4px;
-      border-radius: 6px;
-      background-color: currentColor;
-      opacity: 0.3;
+      height: 16px;
+      border-radius: 9999px;
+      touch-action: none;
     }
 
-    .CustomSlider-track {
-      display: block;
-      position: absolute;
-      height: 4px;
-      border-radius: 6px;
-      background-color: currentColor;
+    .Slider-track::before {
+      content: '';
+      width: 100%;
+      height: 2px;
+      border-radius: 9999px;
+      background-color: gainsboro;
+      touch-action: none;
     }
 
-    .CustomSlider-thumb {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .Slider-track[data-disabled] {
+      cursor: not-allowed;
+    }
+
+    .Slider-thumb {
       position: absolute;
-      width: 20px;
-      height: 20px;
-      margin-left: -6px;
+      width: 16px;
+      height: 16px;
       box-sizing: border-box;
       border-radius: 50%;
-      outline: 0;
-      background-color: ${isDarkMode ? cyan[300] : cyan[500]};
-      transition-property: box-shadow, transform;
-      transition-timing-function: ease;
-      transition-duration: 120ms;
-      transform-origin: center;
-    }
+      background-color: black;
+      transform: translateX(-50%);
+      touch-action: none;
 
-    .CustomSlider-thumb:hover {
-      box-shadow: 0 0 0 6px ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
-    }
+      &:focus-visible {
+        outline: 2px solid black;
+        outline-offset: 2px;
+      }
+
+      &[data-dragging] {
+        background-color: pink;
+      }
 
-    .CustomSlider-thumb.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(isDarkMode ? cyan[400] : cyan[200], 0.5)};
-      outline: none;
+      &[data-disabled] {
+        background-color: ${grey[300]};
+      }
     }
 
-    .CustomSlider-thumb.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(isDarkMode ? cyan[400] : cyan[200], 0.5)};
-      outline: none;
-      transform: scale(1.2);
+    .Slider-label {
+      cursor: unset;
+      font-weight: bold;
     }
 
-    .CustomSlider-thumb.${sliderClasses.disabled} {
-      background-color: ${isDarkMode ? grey[600] : grey[300]};
+    .Slider-label[data-disabled='true'] {
+      color: ${grey[600]};
     }
     `}</style>
   );
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
index 1a50dc6d87..898568ee34 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
@@ -1,46 +1,62 @@
 import * as React from 'react';
-import { useTheme, alpha } from '@mui/system';
-import { Slider, sliderClasses } from '@base_ui/react/v5_Slider';
+import { useTheme } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
-    <div style={{ width: 320 }}>
-      <Slider
-        slotProps={{
-          root: { className: 'CustomSlider' },
-          rail: { className: 'CustomSlider-rail' },
-          track: { className: 'CustomSlider-track' },
-          thumb: { className: 'CustomSlider-thumb' },
-        }}
+    <div
+      className={isDarkMode ? 'dark' : ''}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
+      <Slider.Root
+        className="Slider"
         defaultValue={50}
-      />
-      <Slider
-        slotProps={{
-          root: { className: 'CustomSlider' },
-          rail: { className: 'CustomSlider-rail' },
-          track: { className: 'CustomSlider-track' },
-          thumb: { className: 'CustomSlider-thumb' },
-        }}
+        aria-labelledby="VolumeSliderLabel"
+      >
+        <Label id="VolumeSliderLabel" className="Slider-label">
+          Volume
+        </Label>
+        <Slider.Output className="Slider-output" />
+        <Slider.Track className="Slider-track">
+          <Slider.Thumb className="Slider-thumb" />
+        </Slider.Track>
+      </Slider.Root>
+
+      <Slider.Root
+        className="Slider"
         defaultValue={30}
+        aria-labelledby="BrightnessSliderLabel"
         disabled
-      />
+      >
+        <Label id="BrightnessSliderLabel" className="Slider-label">
+          Brightness
+        </Label>
+        <Slider.Output className="Slider-output" />
+        <Slider.Track className="Slider-track">
+          <Slider.Thumb className="Slider-thumb" />
+        </Slider.Track>
+      </Slider.Root>
       <Styles />
     </div>
   );
 }
 
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
+function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = Slider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
 
 const grey = {
   50: '#F3F6F9',
@@ -61,84 +77,79 @@ function useIsDarkMode() {
 }
 
 function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
   return (
-    <style>{`
-    .CustomSlider {
-      color: ${isDarkMode ? cyan[300] : cyan[500]};
-      height: 4px;
+    <style suppressHydrationWarning>{`
+    .Slider {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-size: 1rem;
       width: 100%;
-      padding: 16px 0;
-      display: inline-flex;
       align-items: center;
       position: relative;
-      cursor: pointer;
-      touch-action: none;
       -webkit-tap-highlight-color: transparent;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 1rem;
     }
 
-    .CustomSlider.${sliderClasses.disabled} { 
-      pointer-events: none;
-      cursor: default;
-      color: ${isDarkMode ? grey[600] : grey[300]};
-      opacity: 0.4;
-      outline: none;
+    .Slider-output {
+      text-align: right;
     }
 
-    .CustomSlider-rail {
-      display: block;
-      position: absolute;
+    .Slider-track {
+      grid-column: 1/3;
+      display: flex;
+      align-items: center;
+      position: relative;
       width: 100%;
-      height: 4px;
-      border-radius: 6px;
-      background-color: currentColor;
-      opacity: 0.3;
+      height: 16px;
+      border-radius: 9999px;
+      touch-action: none;
     }
 
-    .CustomSlider-track {
-      display: block;
-      position: absolute;
-      height: 4px;
-      border-radius: 6px;
-      background-color: currentColor;
+    .Slider-track::before {
+      content: '';
+      width: 100%;
+      height: 2px;
+      border-radius: 9999px;
+      background-color: gainsboro;
+      touch-action: none;
     }
 
-    .CustomSlider-thumb {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .Slider-track[data-disabled] {
+      cursor: not-allowed;
+    }
+
+    .Slider-thumb {
       position: absolute;
-      width: 20px;
-      height: 20px;
-      margin-left: -6px;
+      width: 16px;
+      height: 16px;
       box-sizing: border-box;
       border-radius: 50%;
-      outline: 0;
-      background-color: ${isDarkMode ? cyan[300] : cyan[500]};
-      transition-property: box-shadow, transform;
-      transition-timing-function: ease;
-      transition-duration: 120ms;
-      transform-origin: center;
-    }
+      background-color: black;
+      transform: translateX(-50%);
+      touch-action: none;
 
-    .CustomSlider-thumb:hover {
-      box-shadow: 0 0 0 6px ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
-    }
+      &:focus-visible {
+        outline: 2px solid black;
+        outline-offset: 2px;
+      }
+
+      &[data-dragging] {
+        background-color: pink;
+      }
 
-    .CustomSlider-thumb.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(isDarkMode ? cyan[400] : cyan[200], 0.5)};
-      outline: none;
+      &[data-disabled] {
+        background-color: ${grey[300]};
+      }
     }
 
-    .CustomSlider-thumb.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(isDarkMode ? cyan[400] : cyan[200], 0.5)};
-      outline: none;
-      transform: scale(1.2);
+    .Slider-label {
+      cursor: unset;
+      font-weight: bold;
     }
 
-    .CustomSlider-thumb.${sliderClasses.disabled} {
-      background-color: ${isDarkMode ? grey[600] : grey[300]};
+    .Slider-label[data-disabled='true'] {
+      color: ${grey[600]};
     }
     `}</style>
   );
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
index 4c56315168..441bf1f142 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -1,25 +1,52 @@
 import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
+import PropTypes from 'prop-types';
+import { styled, useTheme, Box } from '@mui/system';
+import * as BaseSlider from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
-    <Box sx={{ width: 320 }}>
-      <Slider defaultValue={50} />
-      <Slider defaultValue={30} disabled />
+    <Box
+      className={isDarkMode ? 'dark' : ''}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
+        <Label id="VolumeSliderLabel">Volume</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+
+      <Slider defaultValue={30} aria-labelledby="BrightnessSliderLabel" disabled>
+        <Label id="BrightnessSliderLabel">Brightness</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
     </Box>
   );
 }
 
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
+function BaseLabel(props) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
+
+BaseLabel.propTypes = {
+  id: PropTypes.string,
 };
 
 const grey = {
@@ -35,88 +62,99 @@ const grey = {
   900: '#1C2025',
 };
 
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 4px;
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
   width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
   align-items: center;
   position: relative;
-  cursor: pointer;
-  touch-action: none;
   -webkit-tap-highlight-color: transparent;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
+`;
 
-  &.${sliderClasses.disabled} { 
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
+const SliderOutput = styled(BaseSlider.Output)`
+  text-align: right;
+`;
+
+const SliderTrack = styled(BaseSlider.Track)`
+  grid-column: 1/3;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 9999px;
+  touch-action: none;
 
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
+  &::before {
+    content: '';
     width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
+    height: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
   }
 
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
+  &[data-disabled] {
+    cursor: not-allowed;
   }
 
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-    
-    &.${sliderClasses.disabled} {
-      background-color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    }
+  .dark &::before {
+    background-color: ${grey[700]};
+  }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(-50%);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
+  }
+
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-dragging='true'] {
+    background-color: pink;
+  }
+
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
+  }
+
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+const Label = styled(BaseLabel)`
+  cursor: unset;
+  font-weight: bold;
+
+  &[data-disabled='true'] {
+    color: ${grey[600]};
   }
-`,
-);
+`;
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
index 4c56315168..bc8a517668 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -1,26 +1,48 @@
 import * as React from 'react';
-import { styled, alpha, Box } from '@mui/system';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
+import { styled, useTheme, Box } from '@mui/system';
+import * as BaseSlider from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
-    <Box sx={{ width: 320 }}>
-      <Slider defaultValue={50} />
-      <Slider defaultValue={30} disabled />
+    <Box
+      className={isDarkMode ? 'dark' : ''}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
+        <Label id="VolumeSliderLabel">Volume</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+
+      <Slider defaultValue={30} aria-labelledby="BrightnessSliderLabel" disabled>
+        <Label id="BrightnessSliderLabel">Brightness</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
     </Box>
   );
 }
 
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
-};
+function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
 
 const grey = {
   50: '#F3F6F9',
@@ -35,88 +57,99 @@ const grey = {
   900: '#1C2025',
 };
 
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 4px;
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
   width: 100%;
-  padding: 16px 0;
-  display: inline-flex;
   align-items: center;
   position: relative;
-  cursor: pointer;
-  touch-action: none;
   -webkit-tap-highlight-color: transparent;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
+`;
 
-  &.${sliderClasses.disabled} { 
-    pointer-events: none;
-    cursor: default;
-    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    opacity: 0.4;
-  }
+const SliderOutput = styled(BaseSlider.Output)`
+  text-align: right;
+`;
+
+const SliderTrack = styled(BaseSlider.Track)`
+  grid-column: 1/3;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 9999px;
+  touch-action: none;
 
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
+  &::before {
+    content: '';
     width: 100%;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
+    height: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
   }
 
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    height: 4px;
-    border-radius: 6px;
-    background-color: currentColor;
+  &[data-disabled] {
+    cursor: not-allowed;
   }
 
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    margin-left: -6px;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-    transition-property: box-shadow, transform;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-    transform-origin: center;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      transform: scale(1.2);
-    }
-    
-    &.${sliderClasses.disabled} {
-      background-color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
-    }
+  .dark &::before {
+    background-color: ${grey[700]};
+  }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(-50%);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
+  }
+
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-dragging='true'] {
+    background-color: pink;
+  }
+
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
+  }
+
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+const Label = styled(BaseLabel)`
+  cursor: unset;
+  font-weight: bold;
+
+  &[data-disabled='true'] {
+    color: ${grey[600]};
   }
-`,
-);
+`;
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
index 8d8d77dbaf..a83f571ac6 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview
@@ -1,2 +1,15 @@
-<Slider defaultValue={50} />
-<Slider defaultValue={30} disabled />
\ No newline at end of file
+<Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
+  <Label id="VolumeSliderLabel">Volume</Label>
+  <SliderOutput />
+  <SliderTrack>
+    <SliderThumb />
+  </SliderTrack>
+</Slider>
+
+<Slider defaultValue={30} aria-labelledby="BrightnessSliderLabel" disabled>
+  <Label id="BrightnessSliderLabel">Brightness</Label>
+  <SliderOutput />
+  <SliderTrack>
+    <SliderThumb />
+  </SliderTrack>
+</Slider>
\ No newline at end of file
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
index 42b2d30312..32a0e2d814 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -1,8 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import { Slider as BaseSlider } from '@base_ui/react/v5_Slider';
-import clsx from 'clsx';
+import * as BaseSlider from '@base_ui/react/Slider';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
 
 function useIsDarkMode() {
   const theme = useTheme();
@@ -14,101 +17,148 @@ export default function UnstyledSliderIntroduction() {
   const isDarkMode = useIsDarkMode();
 
   return (
-    <div className={isDarkMode ? 'dark' : ''} style={{ width: 320 }}>
-      <Slider defaultValue={50} />
-      <Slider defaultValue={30} disabled />
+    <div
+      className={isDarkMode ? 'dark' : ''}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
+        <Label id="VolumeSliderLabel">Volume</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+
+      <Slider defaultValue={30} disabled aria-labelledby="BrightnessSliderLabel">
+        <Label id="BrightnessSliderLabel">Brightness</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
     </div>
   );
 }
 
-const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
+const Slider = React.forwardRef(function Slider(props, ref) {
+  return (
+    <BaseSlider.Root
+      {...props}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'relative w-full items-center grid grid-cols-2 gap-4',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    />
+  );
+});
+
+Slider.propTypes = {
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
+
+const SliderOutput = React.forwardRef(function SliderOutput(props, ref) {
+  return (
+    <BaseSlider.Output
+      {...props}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'text-right',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    />
+  );
+});
+
+SliderOutput.propTypes = {
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
 
-const Slider = React.forwardRef((props, ref) => {
+const SliderTrack = React.forwardRef(function SliderTrack(props, ref) {
   return (
-    <BaseSlider
+    <BaseSlider.Track
+      {...props}
       ref={ref}
+      className={(state) =>
+        classNames(
+          "col-span-2 relative flex items-center w-full h-4 before:content-[''] before:w-full before:h-1 before:rounded-full before:touch-none before:bg-[gainsboro]",
+          state.disabled && 'cursor-not-allowed',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    />
+  );
+});
+
+SliderTrack.propTypes = {
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
+
+const SliderThumb = React.forwardRef(function SliderThumb(props, ref) {
+  return (
+    <BaseSlider.Thumb
       {...props}
-      slotProps={{
-        ...props.slotProps,
-        root: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.root,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `h-1.5 w-full py-4 inline-flex items-center relative touch-none ${
-                ownerState.disabled
-                  ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600'
-                  : 'hover:opacity-100 cursor-pointer text-purple-600 dark:text-purple-400'
-              }`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        rail: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.rail,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              'block absolute w-full h-[4px] rounded-full bg-current opacity-40',
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        track: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.track,
-            ownerState,
-          );
-
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              'block absolute h-[4px] rounded-full bg-current',
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        thumb: (ownerState, { active, focused }) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.thumb,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `absolute w-[20px] h-[20px] -ml-1.5 box-border rounded-full outline-0 bg-current hover:shadow-outline-purple transition ${
-                focused || active
-                  ? 'shadow-[0_0_0_8px_rgba(192,132,252,0.5)] dark:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] dark:active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] scale-[1.2] outline-none'
-                  : ''
-              }`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-      }}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'absolute w-4 h-4 box-border rounded-[50%] bg-black touch-none translate-x-[-50%] focus-visible:outline-black focus-visible:outline-offset-2',
+          state.dragging && 'bg-pink-400',
+          state.disabled && 'bg-gray-400',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
     />
   );
 });
 
-Slider.propTypes = {
+SliderThumb.propTypes = {
   /**
-   * The props used for each slot inside the Slider.
-   * @default {}
+   * Class names applied to the element or a function that returns them based on the component's state.
    */
-  slotProps: PropTypes.shape({
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    valueLabel: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
-  }),
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
+
+function Label(props) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label
+      id={id}
+      htmlFor={htmlFor}
+      className={classNames('font-bold', disabled && 'text-gray-500')}
+      {...otherProps}
+    />
+  );
+}
+
+Label.propTypes = {
+  id: PropTypes.string,
 };
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
index 42c8d2e662..67f97d56f4 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import { Slider as BaseSlider, SliderProps } from '@base_ui/react/v5_Slider';
-import clsx from 'clsx';
+import * as BaseSlider from '@base_ui/react/Slider';
+
+function classNames(...classes: Array<string | boolean | undefined | null>) {
+  return classes.filter(Boolean).join(' ');
+}
 
 function useIsDarkMode() {
   const theme = useTheme();
@@ -13,85 +16,128 @@ export default function UnstyledSliderIntroduction() {
   const isDarkMode = useIsDarkMode();
 
   return (
-    <div className={isDarkMode ? 'dark' : ''} style={{ width: 320 }}>
-      <Slider defaultValue={50} />
-      <Slider defaultValue={30} disabled />
+    <div
+      className={isDarkMode ? 'dark' : ''}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+    >
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
+        <Label id="VolumeSliderLabel">Volume</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+
+      <Slider defaultValue={30} disabled aria-labelledby="BrightnessSliderLabel">
+        <Label id="BrightnessSliderLabel">Brightness</Label>
+        <SliderOutput />
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
     </div>
   );
 }
 
-const resolveSlotProps = (fn: any, args: any) =>
-  typeof fn === 'function' ? fn(args) : fn;
+const Slider = React.forwardRef(function Slider(
+  props: BaseSlider.RootProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <BaseSlider.Root
+      {...props}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'relative w-full items-center grid grid-cols-2 gap-4',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    />
+  );
+});
 
-const Slider = React.forwardRef<HTMLSpanElement, SliderProps>((props, ref) => {
+const SliderOutput = React.forwardRef(function SliderOutput(
+  props: BaseSlider.OutputProps,
+  ref: React.ForwardedRef<HTMLOutputElement>,
+) {
   return (
-    <BaseSlider
+    <BaseSlider.Output
+      {...props}
       ref={ref}
+      className={(state) =>
+        classNames(
+          'text-right',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    />
+  );
+});
+
+const SliderTrack = React.forwardRef(function SliderTrack(
+  props: BaseSlider.TrackProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <BaseSlider.Track
       {...props}
-      slotProps={{
-        ...props.slotProps,
-        root: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.root,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `h-1.5 w-full py-4 inline-flex items-center relative touch-none ${
-                ownerState.disabled
-                  ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600'
-                  : 'hover:opacity-100 cursor-pointer text-purple-600 dark:text-purple-400'
-              }`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        rail: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.rail,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              'block absolute w-full h-[4px] rounded-full bg-current opacity-40',
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        track: (ownerState) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.track,
-            ownerState,
-          );
+      ref={ref}
+      className={(state) =>
+        classNames(
+          "col-span-2 relative flex items-center w-full h-4 before:content-[''] before:w-full before:h-1 before:rounded-full before:touch-none before:bg-[gainsboro]",
+          state.disabled && 'cursor-not-allowed',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
+    />
+  );
+});
 
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              'block absolute h-[4px] rounded-full bg-current',
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-        thumb: (ownerState, { active, focused }) => {
-          const resolvedSlotProps = resolveSlotProps(
-            props.slotProps?.thumb,
-            ownerState,
-          );
-          return {
-            ...resolvedSlotProps,
-            className: clsx(
-              `absolute w-[20px] h-[20px] -ml-1.5 box-border rounded-full outline-0 bg-current hover:shadow-outline-purple transition ${
-                focused || active
-                  ? 'shadow-[0_0_0_8px_rgba(192,132,252,0.5)] dark:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] dark:active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] scale-[1.2] outline-none'
-                  : ''
-              }`,
-              resolvedSlotProps?.className,
-            ),
-          };
-        },
-      }}
+const SliderThumb = React.forwardRef(function SliderThumb(
+  props: BaseSlider.ThumbProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <BaseSlider.Thumb
+      {...props}
+      ref={ref}
+      className={(state) =>
+        classNames(
+          'absolute w-4 h-4 box-border rounded-[50%] bg-black touch-none translate-x-[-50%] focus-visible:outline-black focus-visible:outline-offset-2',
+          state.dragging && 'bg-pink-400',
+          state.disabled && 'bg-gray-400',
+          typeof props.className === 'function'
+            ? props.className(state)
+            : props.className,
+        )
+      }
     />
   );
 });
+
+function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label
+      id={id}
+      htmlFor={htmlFor}
+      className={classNames('font-bold', disabled && 'text-gray-500')}
+      {...otherProps}
+    />
+  );
+}
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
index 8d8d77dbaf..610fb2c1b8 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview
@@ -1,2 +1,15 @@
-<Slider defaultValue={50} />
-<Slider defaultValue={30} disabled />
\ No newline at end of file
+<Slider defaultValue={50} aria-labelledby="VolumeSliderLabel">
+  <Label id="VolumeSliderLabel">Volume</Label>
+  <SliderOutput />
+  <SliderTrack>
+    <SliderThumb />
+  </SliderTrack>
+</Slider>
+
+<Slider defaultValue={30} disabled aria-labelledby="BrightnessSliderLabel">
+  <Label id="BrightnessSliderLabel">Brightness</Label>
+  <SliderOutput />
+  <SliderTrack>
+    <SliderThumb />
+  </SliderTrack>
+</Slider>
\ No newline at end of file
diff --git a/docs/data/base/components/slider/VerticalSlider.js b/docs/data/base/components/slider/VerticalSlider.js
index 5af2bb6cad..5c50205af0 100644
--- a/docs/data/base/components/slider/VerticalSlider.js
+++ b/docs/data/base/components/slider/VerticalSlider.js
@@ -1,101 +1,154 @@
 import * as React from 'react';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-import { styled, alpha, Box } from '@mui/system';
+import PropTypes from 'prop-types';
+import * as BaseSlider from '@base_ui/react/Slider';
+import { styled, useTheme } from '@mui/system';
 
 export default function VerticalSlider() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
-    <Box sx={{ height: 300 }}>
-      <Slider orientation="vertical" defaultValue={30} />
-    </Box>
+    <div className={isDarkMode ? 'dark' : ''}>
+      <Slider
+        defaultValue={50}
+        orientation="vertical"
+        aria-labelledby="VolumeSliderLabel"
+      >
+        <Label id="VolumeSliderLabel">Volume</Label>
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+        <SliderOutput />
+      </Slider>
+    </div>
   );
 }
 
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
+function BaseLabel(props) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
+
+BaseLabel.propTypes = {
+  id: PropTypes.string,
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 95%;
-  width: 4px;
-  display: inline-block;
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
+  height: 100%;
+  width: 5rem;
+  align-items: center;
   position: relative;
-  margin-top: 0.75rem;
-  cursor: pointer;
-  touch-action: none;
   -webkit-tap-highlight-color: transparent;
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  gap: 1rem;
+`;
+
+const SliderOutput = styled(BaseSlider.Output)`
+  font-size: 1.125rem;
+`;
 
+const SliderTrack = styled(BaseSlider.Track)`
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 2px;
+  height: 300px;
+  border-radius: 9999px;
+  touch-action: none;
 
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
+  &::before {
+    content: '';
     height: 100%;
-    width: inherit;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
+    width: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
   }
 
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    width: inherit;
-    border-radius: 6px;
-    background-color: currentColor;
+  .dark &::before {
+    background-color: ${grey[700]};
   }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(calc(-50% + 1px));
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
+  }
+
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-dragging='true'] {
+    background-color: pink;
+  }
+
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
+  }
+
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+const Label = styled(BaseLabel)`
+  cursor: unset;
+  font-weight: 700;
+  font-size: 1rem;
 
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};  
-    left: 50%;
-    -webkit-transform: translate(-50%, 50%);
-    -moz-transform: translate(-50%, 50%);
-    -ms-transform: translate(-50%, 50%);
-    transform: translate(-50%, 50%);
-    transition-property: box-shadow, width, height;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      width: 22px;
-      height: 22px;
-    }
+  &[data-disabled='true'] {
+    color: ${grey[600]};
   }
-`,
-);
+`;
diff --git a/docs/data/base/components/slider/VerticalSlider.tsx b/docs/data/base/components/slider/VerticalSlider.tsx
index 5af2bb6cad..80b1ea1e1d 100644
--- a/docs/data/base/components/slider/VerticalSlider.tsx
+++ b/docs/data/base/components/slider/VerticalSlider.tsx
@@ -1,101 +1,149 @@
 import * as React from 'react';
-import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/v5_Slider';
-import { styled, alpha, Box } from '@mui/system';
+import * as BaseSlider from '@base_ui/react/Slider';
+import { styled, useTheme } from '@mui/system';
 
 export default function VerticalSlider() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
-    <Box sx={{ height: 300 }}>
-      <Slider orientation="vertical" defaultValue={30} />
-    </Box>
+    <div className={isDarkMode ? 'dark' : ''}>
+      <Slider
+        defaultValue={50}
+        orientation="vertical"
+        aria-labelledby="VolumeSliderLabel"
+      >
+        <Label id="VolumeSliderLabel">Volume</Label>
+        <SliderTrack>
+          <SliderThumb />
+        </SliderTrack>
+        <SliderOutput />
+      </Slider>
+    </div>
   );
 }
 
-const blue = {
-  100: '#DAECFF',
-  200: '#99CCF3',
-  400: '#3399FF',
-  300: '#66B2FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B3',
-  900: '#003A75',
+function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
+  const { id, ...otherProps } = props;
+  const { subitems, disabled } = BaseSlider.useSliderContext();
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return (
+    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
-const Slider = styled(BaseSlider)(
-  ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
-  height: 95%;
-  width: 4px;
-  display: inline-block;
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+const Slider = styled(BaseSlider.Root)`
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
+  height: 100%;
+  width: 5rem;
+  align-items: center;
   position: relative;
-  margin-top: 0.75rem;
-  cursor: pointer;
-  touch-action: none;
   -webkit-tap-highlight-color: transparent;
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  gap: 1rem;
+`;
+
+const SliderOutput = styled(BaseSlider.Output)`
+  font-size: 1.125rem;
+`;
 
+const SliderTrack = styled(BaseSlider.Track)`
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 2px;
+  height: 300px;
+  border-radius: 9999px;
+  touch-action: none;
 
-  & .${sliderClasses.rail} {
-    display: block;
-    position: absolute;
+  &::before {
+    content: '';
     height: 100%;
-    width: inherit;
-    border-radius: 6px;
-    background-color: currentColor;
-    opacity: 0.3;
+    width: 2px;
+    border-radius: 9999px;
+    background-color: ${grey[400]};
+    touch-action: none;
   }
 
-  & .${sliderClasses.track} {
-    display: block;
-    position: absolute;
-    width: inherit;
-    border-radius: 6px;
-    background-color: currentColor;
+  &[data-disabled] {
+    cursor: not-allowed;
   }
 
-  & .${sliderClasses.thumb} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    border-radius: 50%;
-    outline: 0;
-    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};  
-    left: 50%;
-    -webkit-transform: translate(-50%, 50%);
-    -moz-transform: translate(-50%, 50%);
-    -ms-transform: translate(-50%, 50%);
-    transform: translate(-50%, 50%);
-    transition-property: box-shadow, width, height;
-    transition-timing-function: ease;
-    transition-duration: 120ms;
-
-    &:hover {
-      box-shadow: 0 0 0 6px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
-    }
-
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-    }
-
-    &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[400],
-        0.5,
-      )};
-      outline: none;
-      width: 22px;
-      height: 22px;
-    }
+  .dark &::before {
+    background-color: ${grey[700]};
+  }
+`;
+
+const SliderThumb = styled(BaseSlider.Thumb)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: black;
+  transform: translateX(calc(-50% + 1px));
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
+  }
+
+  .dark & {
+    background-color: ${grey[300]};
+  }
+
+  .dark &:focus-visible {
+    outline-color: ${grey[300]};
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-dragging='true'] {
+    background-color: pink;
+  }
+
+  &[data-disabled],
+  .dark &[data-disabled] {
+    background-color: ${grey[600]};
+  }
+
+  .dark &[data-dragging='true'] {
+    background-color: pink;
+  }
+`;
+
+const Label = styled(BaseLabel)`
+  cursor: unset;
+  font-weight: 700;
+  font-size: 1rem;
+
+  &[data-disabled='true'] {
+    color: ${grey[600]};
   }
-`,
-);
+`;
diff --git a/docs/data/base/components/slider/VerticalSlider.tsx.preview b/docs/data/base/components/slider/VerticalSlider.tsx.preview
index 83ed5ae787..1c4902a5db 100644
--- a/docs/data/base/components/slider/VerticalSlider.tsx.preview
+++ b/docs/data/base/components/slider/VerticalSlider.tsx.preview
@@ -1 +1,11 @@
-<Slider orientation="vertical" defaultValue={30} />
\ No newline at end of file
+<Slider
+  defaultValue={50}
+  orientation="vertical"
+  aria-labelledby="VolumeSliderLabel"
+>
+  <Label id="VolumeSliderLabel">Volume</Label>
+  <SliderTrack>
+    <SliderThumb />
+  </SliderTrack>
+  <SliderOutput />
+</Slider>
\ No newline at end of file
diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
index 0fb391616c..8c8969e635 100644
--- a/docs/data/base/components/slider/slider.md
+++ b/docs/data/base/components/slider/slider.md
@@ -1,193 +1,232 @@
 ---
 productId: base-ui
-title: React Slider component and hook
+title: React Slider components
 components: Slider, SliderRoot, SliderOutput, SliderThumb, SliderTrack
-hooks: useSlider
+hooks: useSlider, useSliderRoot, useSliderOutput, useSliderThumb, useSliderTrack
 githubLabel: 'component: slider'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
+packageName: '@base_ui/react'
 ---
 
 # Slider
 
-<p class="description">A slider is a UI element that lets users select a single value or a range of values along a bar.
+<p class="description">The Slider component provides users with an input for a one or more numerical values within a given range.
 </p>
 
 {{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
-## Introduction
-
-The Slider component lets users make selections from a range of values along a horizontal or vertical bar.
+{{"demo": "UnstyledSliderIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
-Sliders are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters such as gradients or saturation.
+## Installation
 
-{{"demo": "UnstyledSliderIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
+Base UI components are all available as a single package.
 
-## Component
+<codeblock storageKey="package-manager">
 
-```jsx
-import { Slider } from '@base_ui/react/v5_Slider';
+```bash npm
+npm install @base_ui/react
 ```
 
-### Anatomy
-
-The Slider component is composed of a root `<span>` that houses several interior `<span>` elements:
-
-- rail: the full length of the slider
-- track: the section of the slider that's active
-- thumb: the button that the user moves across the slider
-- mark: optional pre-defined stops along the track
-- markLabel: optional label to display the mark's value
-- valueLabel: optional label to display the values on a range slider
-
-```html
-<span class="base-Slider-root">
-  <span class="base-Slider-rail"></span>
-  <span class="base-Slider-track"></span>
-  <span
-    data-index="0"
-    class="base-Slider-mark base-Slider-markActive"
-    style="left: 0%;"
-  ></span>
-  <span
-    aria-hidden="true"
-    data-index="0"
-    class="base-Slider-markLabel base-Slider-markLabelActive"
-    style="left: 0%;"
-    >0</span
-  >
-  <span data-index="1" class="base-Slider-mark" style="left: 50%;"></span>
-  <span
-    aria-hidden="true"
-    data-index="1"
-    class="base-Slider-markLabel"
-    style="left: 50%;"
-    >50</span
-  >
-  <span data-index="2" class="base-Slider-mark" style="left: 100%;"></span>
-  <span
-    aria-hidden="true"
-    data-index="2"
-    class="base-Slider-markLabel"
-    style="left: 100%;"
-    >100</span
-  >
-  <span class="base-Slider-thumb">
-    <input />
-  </span>
-</span>
+```bash yarn
+yarn add @base_ui/react
 ```
 
-:::info
-Both the `mark` and `markLabel` slots have corresponding `*Active` classes that are applied conditionally.
-:::
+```bash pnpm
+pnpm add @base_ui/react
+```
 
-### Custom structure
+</codeblock>
 
-Use the `slots` prop to override the root or any other interior slot:
+Once you have the package installed, import the component.
 
 ```jsx
-<Slider slots={{ root: 'div', thumb: 'div' }} />
+import * as Slider from '@base_ui/react/Slider';
 ```
 
-:::info
-The `slots` prop is available on all non-utility Base components.
-See [Overriding component structure](/base-ui/guides/overriding-component-structure/) for full details.
-:::
+### Anatomy
 
-Use the `slotProps` prop to pass custom props to internal slots.
-The following code snippet applies a CSS class called `my-rail` to the rail slot:
+Sliders are implemented using a collection of related components:
 
-```jsx
-<Slider slotProps={{ rail: { className: 'my-rail' } }} />
+- `<Slider.Root />` is a top-level component that wraps the other components.
+- `<Slider.Output />` renders the value of the slider.
+- `<Slider.Track />` renders the track area along which the thumb(s) can be moved.
+- `<Slider.Thumb />` renders the element that can be moved along the track to change the value.
+
+```tsx
+<Slider.Root>
+  <Slider.Output />
+  <Slider.Track>
+    <Slider.Thumb />
+  </Slider.Track>
+</Slider.Root>
 ```
 
-### Usage with TypeScript
+## Value
+
+### Default value
+
+When Slider is uncontrolled, the `defaultValue` prop sets the initial value of the component.
+
+### Controlled
+
+When Slider is uncontrolled, the `value` prop holds the numerical value(s), and two callbacks are provided for when the value changes:
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
-This way, you can safely provide the custom root's props directly on the component:
+- `onValueChange` is called when the value is changing while the thumb is being moved along the track
+- `onValueCommitted` is called when thumb stops moving and `pointerup` is triggered
 
 ```tsx
-<Slider<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+function App() {
+  const [value, setValue] = useState(50);
+  return (
+    <Slider.Root value={value} onValueChange={setValue}>
+      <Slider.Output />
+      <Slider.Track>
+        <Slider.Thumb />
+      </Slider.Track>
+    </Slider.Root>
+  );
+}
 ```
 
-The same applies for props specific to custom primitive elements:
+## Validation
+
+### Min and max
+
+The `min` and `max` props can be used to restrict the value(s) within a range.
 
 ```tsx
-<Slider<'input'> slots={{ root: 'input' }} autoFocus={true} />
+<Slider.Root min={1} max={9}>
+  <Slider.Output />
+  <Slider.Track>
+    <Slider.Thumb />
+  </Slider.Track>
+</Slider.Root>
 ```
 
-## Hook
+### Step
 
-```js
-import { useSlider } from '@base_ui/react/useSlider';
+The `step` prop snaps the each value to multiples of the given number. In the below example, the input value snaps to increments of `4` starting from the initial `defaultValue`: `3`, `7`, `11`, `15`, and so on.
+
+```tsx
+<Slider.Root step={4} defaultValue={3}>
+  <Slider.Output />
+  <Slider.Track>
+    <Slider.Thumb />
+  </Slider.Track>
+</Slider.Root>
 ```
 
-The `useSlider` hook lets you apply the functionality of a Slider to a fully custom component.
-It returns props to be placed on the custom component, along with fields representing the component's internal state.
+You can specify the `largeStep` prop to change the step when the user holds the <kbd>shift</kbd> key, snapping to multiples of 10 by default.
 
-Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
+## Range Sliders
 
-:::info
-Hooks give you the most room for customization, but require more work to implement.
-With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
+To let users set the start and end of a range on a Slider, provide an array of values to the `value` or `defaultValue` prop, and place a `<Slider.Thumb />` for each value in the array:
 
-You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#anatomy).
-:::
+```tsx
+<Slider.Root defaultValue={[45, 70]}>
+  <Slider.Output />
+  <Slider.Track>
+    <Slider.Thumb />
+    <Slider.Thumb />
+  </Slider.Track>
+</Slider.Root>
+```
 
-## Customization
+{{"demo": "RangeSlider.js"}}
 
-### Vertical
+### Overlapping values
 
-Slider components can be arranged vertically as well as horizontally.
+The `minDistanceBetweenValues` prop can be used to to set the mininum difference between values in a range slider, so thumbs do not overlap in the same position. In the below example, the thumbs cannot be moved further towards each other as the difference between values would exceed `minDistanceBetweenValues`:
 
-When vertical, you must set `orientation="vertical"` on the Slider so the user can navigate with the up and down arrow keys (rather than the default left-to-right behavior for horizontal sliders).
+```tsx
+<Slider.Root minDistanceBetweenValues={5} defaultValue={[15, 20]}>
+  {/* Subcomponents */}
+</Slider.Root>
+```
 
-{{"demo": "VerticalSlider.js"}}
+## Vertical
 
-### Discrete sliders
+To create vertical sliders, set the `orientation` prop to `"vertical"`. This will track thumb movements vertically instead of horizontally.
 
-The most basic Slider is _continuous_, which means it does not have pre-defined (_discrete_) values for the user to select from.
-This is suitable for situations in which an approximate value is good enough for the user, such as brightness or volume.
+```jsx
+<Slider.Root orientation="vertical">{/* Subcomponents */}</Slider.Root>
+```
 
-But if your users need more precise options, you can create a discrete Slider that snaps the thumb to pre-defined stops along the bar.
-Make sure to adjust the `shiftStep` prop (the granularity with which the slider can step when using Page Up/Down or Shift + Arrow Up/Down) to a value divadable with the `step`.
+{{"demo": "VerticalSlider.js"}}
 
-To generate a mark for each stop, use `marks={true}`:
+## RTL
 
-{{"demo": "DiscreteSlider.js"}}
+Use the `isRtl` prop to set the slider's direction to RTL:
 
-#### Custom marks
+```jsx
+<Slider.Root isRtl>{/* Subcomponents */}</Slider.Root>
+```
 
-You can create custom marks by providing a rich array to the `marks` prop:
+In a RTL Slider, <kbd class="key">Left Arrow</kbd> increases the value while <kbd class="key">Right Arrow</kbd> decreases the value.
 
-{{"demo": "DiscreteSliderMarks.js"}}
+{{"demo": "RtlSlider.js"}}
 
-#### Restricted values
+## Overriding default components
 
-If the user should only be able to select from the values provided with the `marks` prop, add `step={null}` to disable all other options:
+Use the `render` prop to override the rendered elements with your own components.
 
-{{"demo": "DiscreteSliderValues.js"}}
+```jsx
+<Slider.Track render={(props) => <MyCustomTrack {...props} />}> />
+```
 
-### Range slider
+All subcomponents accept the `render` prop.
 
-To let users set the start and end of a range on a Slider, provide an array of values to the `value` or `defaultValue` prop:
+The `Slider.Thumb` component's `render` prop contains an additional `inputProps` argument for rendering an `input` element attached to the thumb:
 
-{{"demo": "RangeSlider.js"}}
+```jsx
+<Slider.Thumb
+  render={(props, inputProps) => {
+    const { children, ...rest } = props;
+    return (
+      <MyCustomThumb {...rest}>
+        {children}
+        <input {...inputProps}>
+      <MyCustomThumb/>
+    )
+  }}>
+/>
+```
 
-### Value label
+## Custom subcomponents
 
-A label for the value can be rendered around the thumb by using the optional `slots` prop with the `valueLabel` slot.
-These are typical use cases for showing the value label:
+A `useSliderContext` hook is provided to create custom subcomponents, such as marks or the filled portion of the track:
 
-- always
-- only when hovering over the thumb (using CSS)
-- while interacting with the thumb (hovering or dragging)
+```jsx
+import { useSliderContext } from '@base_ui/react/Slider';
+
+export const TrackFill = React.forwardRef(function TrackFill(
+  props: React.HTMLAttributes<any>,
+  ref: React.ForwardedRef<any>,
+) {
+  const { style, ...otherProps } = props;
+
+  const { disabled, percentageValues } = useSliderContext();
+
+  return (
+    <span
+      data-disabled={disabled}
+      ref={ref}
+      style={{
+        width: `${percentageValues[0]}%`,
+        left: 0,
+        ...style,
+      }}
+      {...otherProps}
+    />
+  );
+})
+```
 
-The following demo shows how to render the value label when the mouse is hovering over the thumb:
+Here's a complete demo of a Material Design style slider that uses custom subcomponents and Base UI's Tooltip:
 
-{{"demo": "LabeledValuesSlider.js"}}
+{{"demo": "CustomSubcomponents.js"}}
 
 ## Accessibility
 
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 9f049a2afa..f129e6a51b 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -30,7 +30,7 @@ const pages: readonly MuiPage[] = [
           // { pathname: '/base-ui/react-radio-group', title: 'Radio Group', planned: true },
           // { pathname: '/base-ui/react-rating', title: 'Rating', planned: true },
           // { pathname: '/base-ui/react-select', title: 'Select' },
-          // { pathname: '/base-ui/react-slider', title: 'Slider' },
+          { pathname: '/base-ui/react-slider', title: 'Slider' },
           { pathname: '/base-ui/react-switch', title: 'Switch' },
           // { pathname: '/base-ui/react-toggle-button-group', title: 'Toggle Button Group', planned: true },
         ],
diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js
index ca976ab67f..a0c53e95f8 100644
--- a/docs/data/base/pagesApi.js
+++ b/docs/data/base/pagesApi.js
@@ -185,6 +185,22 @@ module.exports = [
   },
   { pathname: '/base-ui/react-select/hooks-api/#use-select', title: 'useSelect' },
   { pathname: '/base-ui/react-slider/hooks-api/#use-slider', title: 'useSlider' },
+  {
+    pathname: '/base-ui/react-slider/hooks-api/#use-slider-output',
+    title: 'useSliderOutput',
+  },
+  {
+    pathname: '/base-ui/react-slider/hooks-api/#use-slider-root',
+    title: 'useSliderRoot',
+  },
+  {
+    pathname: '/base-ui/react-slider/hooks-api/#use-slider-thumb',
+    title: 'useSliderThumb',
+  },
+  {
+    pathname: '/base-ui/react-slider/hooks-api/#use-slider-track',
+    title: 'useSliderTrack',
+  },
   {
     pathname: '/base-ui/react-snackbar/hooks-api/#use-snackbar',
     title: 'useSnackbar',
diff --git a/docs/pages/base-ui/api/use-slider-output.json b/docs/pages/base-ui/api/use-slider-output.json
index 1de62cc532..6a1ec91f94 100644
--- a/docs/pages/base-ui/api/use-slider-output.json
+++ b/docs/pages/base-ui/api/use-slider-output.json
@@ -4,5 +4,5 @@
   "name": "useSliderOutput",
   "filename": "/packages/mui-base/src/Slider/SliderOutput/useSliderOutput.ts",
   "imports": ["import { useSliderOutput } from '@base_ui/react/Slider';"],
-  "demos": "<ul></ul>"
+  "demos": "<ul><li><a href=\"/base-ui/react-slider/#hooks\">Slider</a></li></ul>"
 }
diff --git a/docs/pages/base-ui/api/use-slider-root.json b/docs/pages/base-ui/api/use-slider-root.json
index 7268f9971f..041d861a32 100644
--- a/docs/pages/base-ui/api/use-slider-root.json
+++ b/docs/pages/base-ui/api/use-slider-root.json
@@ -4,5 +4,5 @@
   "name": "useSliderRoot",
   "filename": "/packages/mui-base/src/Slider/Root/useSliderRoot.ts",
   "imports": ["import { useSliderRoot } from '@base_ui/react/Slider';"],
-  "demos": "<ul></ul>"
+  "demos": "<ul><li><a href=\"/base-ui/react-slider/#hooks\">Slider</a></li></ul>"
 }
diff --git a/docs/pages/base-ui/api/use-slider-thumb.json b/docs/pages/base-ui/api/use-slider-thumb.json
index f5b5d8175d..df6847ee21 100644
--- a/docs/pages/base-ui/api/use-slider-thumb.json
+++ b/docs/pages/base-ui/api/use-slider-thumb.json
@@ -112,5 +112,5 @@
   "name": "useSliderThumb",
   "filename": "/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts",
   "imports": ["import { useSliderThumb } from '@base_ui/react/Slider';"],
-  "demos": "<ul></ul>"
+  "demos": "<ul><li><a href=\"/base-ui/react-slider/#hooks\">Slider</a></li></ul>"
 }
diff --git a/docs/pages/base-ui/api/use-slider-track.json b/docs/pages/base-ui/api/use-slider-track.json
index 5cac84c761..58d10c557c 100644
--- a/docs/pages/base-ui/api/use-slider-track.json
+++ b/docs/pages/base-ui/api/use-slider-track.json
@@ -4,5 +4,5 @@
   "name": "useSliderTrack",
   "filename": "/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts",
   "imports": ["import { useSliderTrack } from '@base_ui/react/Slider';"],
-  "demos": "<ul></ul>"
+  "demos": "<ul><li><a href=\"/base-ui/react-slider/#hooks\">Slider</a></li></ul>"
 }
diff --git a/docs/pages/base-ui/api/use-slider.json b/docs/pages/base-ui/api/use-slider.json
index 87b0fad7e6..f222461154 100644
--- a/docs/pages/base-ui/api/use-slider.json
+++ b/docs/pages/base-ui/api/use-slider.json
@@ -203,5 +203,5 @@
   "name": "useSlider",
   "filename": "/packages/mui-base/src/useSlider/useSlider.ts",
   "imports": ["import { useSlider } from '@base_ui/react/useSlider';"],
-  "demos": "<ul><li><a href=\"/base-ui/react-slider/#hook\">Slider</a></li></ul>"
+  "demos": "<ul><li><a href=\"/base-ui/react-slider/#hooks\">Slider</a></li></ul>"
 }
diff --git a/docs/pages/base-ui/react-slider/[docsTab]/index.js b/docs/pages/base-ui/react-slider/[docsTab]/index.js
index 9bea529daf..d330202700 100644
--- a/docs/pages/base-ui/react-slider/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-slider/[docsTab]/index.js
@@ -9,6 +9,10 @@ import SliderRootApiJsonPageContent from '../../api/slider-root.json';
 import SliderThumbApiJsonPageContent from '../../api/slider-thumb.json';
 import SliderTrackApiJsonPageContent from '../../api/slider-track.json';
 import useSliderApiJsonPageContent from '../../api/use-slider.json';
+import useSliderOutputApiJsonPageContent from '../../api/use-slider-output.json';
+import useSliderRootApiJsonPageContent from '../../api/use-slider-root.json';
+import useSliderThumbApiJsonPageContent from '../../api/use-slider-thumb.json';
+import useSliderTrackApiJsonPageContent from '../../api/use-slider-track.json';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;
@@ -69,6 +73,34 @@ export const getStaticProps = () => {
   );
   const useSliderApiDescriptions = mapApiPageTranslations(useSliderApiReq);
 
+  const useSliderOutputApiReq = require.context(
+    'docs-base/translations/api-docs/use-slider-output',
+    false,
+    /\.\/use-slider-output.*.json$/,
+  );
+  const useSliderOutputApiDescriptions = mapApiPageTranslations(useSliderOutputApiReq);
+
+  const useSliderRootApiReq = require.context(
+    'docs-base/translations/api-docs/use-slider-root',
+    false,
+    /\.\/use-slider-root.*.json$/,
+  );
+  const useSliderRootApiDescriptions = mapApiPageTranslations(useSliderRootApiReq);
+
+  const useSliderThumbApiReq = require.context(
+    'docs-base/translations/api-docs/use-slider-thumb',
+    false,
+    /\.\/use-slider-thumb.*.json$/,
+  );
+  const useSliderThumbApiDescriptions = mapApiPageTranslations(useSliderThumbApiReq);
+
+  const useSliderTrackApiReq = require.context(
+    'docs-base/translations/api-docs/use-slider-track',
+    false,
+    /\.\/use-slider-track.*.json$/,
+  );
+  const useSliderTrackApiDescriptions = mapApiPageTranslations(useSliderTrackApiReq);
+
   return {
     props: {
       componentsApiDescriptions: {
@@ -85,8 +117,20 @@ export const getStaticProps = () => {
         SliderThumb: SliderThumbApiJsonPageContent,
         SliderTrack: SliderTrackApiJsonPageContent,
       },
-      hooksApiDescriptions: { useSlider: useSliderApiDescriptions },
-      hooksApiPageContents: { useSlider: useSliderApiJsonPageContent },
+      hooksApiDescriptions: {
+        useSlider: useSliderApiDescriptions,
+        useSliderOutput: useSliderOutputApiDescriptions,
+        useSliderRoot: useSliderRootApiDescriptions,
+        useSliderThumb: useSliderThumbApiDescriptions,
+        useSliderTrack: useSliderTrackApiDescriptions,
+      },
+      hooksApiPageContents: {
+        useSlider: useSliderApiJsonPageContent,
+        useSliderOutput: useSliderOutputApiJsonPageContent,
+        useSliderRoot: useSliderRootApiJsonPageContent,
+        useSliderThumb: useSliderThumbApiJsonPageContent,
+        useSliderTrack: useSliderTrackApiJsonPageContent,
+      },
     },
   };
 };
diff --git a/docs/pages/experiments/slider-joy.tsx b/docs/pages/experiments/slider-joy.tsx
new file mode 100644
index 0000000000..967490f4ed
--- /dev/null
+++ b/docs/pages/experiments/slider-joy.tsx
@@ -0,0 +1,300 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
+import { type Axis } from '@base_ui/react/Slider';
+import * as Tooltip from '@base_ui/react/Tooltip';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function App() {
+  const [valueLabelOpen, setValueLabelOpen] = React.useState(false);
+
+  const handleGlobalPointerUp = () => {
+    if (valueLabelOpen) {
+      setValueLabelOpen(false);
+    }
+  };
+
+  return (
+    <div className="App">
+      <Slider.Root className="JoySlider" defaultValue={40}>
+        <Slider.Track className="JoySlider-track">
+          <SliderTrackFill className="JoySlider-track-fill" />
+          {Array.from(Array(10), (_, x) => x).map((v) => {
+            return <SliderMark key={v} index={v} className="JoySlider-mark" />;
+          })}
+          <Tooltip.Root delay={0} open={valueLabelOpen}>
+            <Slider.Thumb
+              className="JoySlider-thumb"
+              onFocus={() => {
+                if (!valueLabelOpen) {
+                  setValueLabelOpen(true);
+                }
+              }}
+              onBlur={() => {
+                if (valueLabelOpen) {
+                  setValueLabelOpen(false);
+                }
+              }}
+              onPointerOver={() => {
+                if (!valueLabelOpen) {
+                  setValueLabelOpen(true);
+                }
+              }}
+              onPointerLeave={(event) => {
+                if (event.buttons !== 1) {
+                  setValueLabelOpen(false);
+                } else {
+                  document.addEventListener('pointerup', handleGlobalPointerUp, { once: true });
+                }
+              }}
+            >
+              <Tooltip.Trigger className="SliderTooltip-trigger" />
+            </Slider.Thumb>
+            <Tooltip.Positioner sideOffset={10} alignment="center">
+              <Tooltip.Popup className="SliderTooltip-popup" data-open={String(valueLabelOpen)}>
+                <Slider.Output />
+                <Tooltip.Arrow className="SliderTooltip-arrow" />
+              </Tooltip.Popup>
+            </Tooltip.Positioner>
+          </Tooltip.Root>
+        </Slider.Track>
+      </Slider.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const SliderMark = React.forwardRef(function SliderMark(props: any, ref: React.ForwardedRef<any>) {
+  const { index, style, ...otherProps } = props;
+  const { percentageValues } = Slider.useSliderContext();
+  const isFilled = percentageValues[0] >= index * 10;
+  return (
+    <span
+      ref={ref}
+      data-mark-active={String(isFilled)}
+      style={{
+        ...style,
+        left: `${(100 / 10) * (index + 0)}%`,
+        visibility: index === 0 ? 'hidden' : 'inherit',
+      }}
+      {...otherProps}
+    />
+  );
+});
+
+const SliderTrackFill = React.forwardRef(function SliderTrackFill(
+  props: any,
+  ref: React.ForwardedRef<any>,
+) {
+  const { style, ...otherProps } = props;
+
+  const { axis, disabled, isRtl, orientation, percentageValues } = Slider.useSliderContext();
+
+  const isRange = percentageValues.length > 1;
+
+  let internalStyles;
+
+  if (isRange) {
+    const trackOffset = percentageValues[0];
+    const trackLeap = percentageValues[percentageValues.length - 1] - trackOffset;
+    internalStyles = getRangeStyles(axis, trackOffset, trackLeap);
+  } else if (orientation === 'vertical') {
+    internalStyles = {
+      bottom: 0,
+      height: `${percentageValues[0]}%`,
+    };
+  } else {
+    internalStyles = {
+      width: `${percentageValues[0]}%`,
+      [isRtl ? 'right' : 'left']: 0,
+    };
+  }
+
+  return (
+    <span
+      data-disabled={disabled}
+      ref={ref}
+      style={{
+        ...internalStyles,
+        ...style,
+      }}
+      {...otherProps}
+    />
+  );
+});
+
+function getRangeStyles(axis: Axis, trackOffset: number, trackLeap: number) {
+  const axisProps: Record<
+    Axis,
+    {
+      offset: (percent: number) => Record<string, string>;
+      leap: (percent: number) => Record<string, string>;
+    }
+  > = {
+    horizontal: {
+      offset: (percent: number) => ({ left: `${percent}%` }),
+      leap: (percent: number) => ({ width: `${percent}%` }),
+    },
+    'horizontal-reverse': {
+      offset: (percent: number) => ({ right: `${percent}%` }),
+      leap: (percent: number) => ({ width: `${percent}%` }),
+    },
+    vertical: {
+      offset: (percent: number) => ({ bottom: `${percent}%` }),
+      leap: (percent: number) => ({ height: `${percent}%` }),
+    },
+  };
+
+  return {
+    ...axisProps[axis].offset(trackOffset),
+    ...axisProps[axis].leap(trackLeap),
+  };
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style suppressHydrationWarning>
+      {`
+        .App {
+          width: 20rem;
+          padding: 1rem;
+        }
+
+        .JoySlider {
+          width: 100%;
+          margin: 16px 0;
+          position: relative;
+          -webkit-tap-highlight-color: transparent;
+        }
+
+        .JoySlider-track {
+          display: flex;
+          align-items: center;
+          position: relative;
+          width: 100%;
+          height: 16px;
+          border-radius: 9999px;
+          touch-action: none;
+          margin-top: 2rem;
+        }
+
+        .JoySlider-track::before {
+          content: '';
+          width: 100%;
+          height: 6px;
+          border-radius: 9999px;
+          touch-action: none;
+          background-color: ${isDarkMode ? '#dde7ee' : '#32383e'};
+        }
+
+        .JoySlider-track-fill {
+          display: block;
+          position: absolute;
+          height: 6px;
+          border-radius: 9999px;
+          background-color: #0b6bcb;
+        }
+
+        .JoySlider-mark {
+          position: absolute;
+          height: 6px;
+          width: 6px;
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: center;
+          align-items: center;
+          transform: translateX(-50%);
+        }
+
+        .JoySlider-mark::before {
+          content: '';
+          display: inline-block;
+          width: 2px;
+          height: 2px;
+          border-radius: 2px;
+          background-color: ${isDarkMode ? '#9fa6ad' : '#555e68'};
+        }
+
+        .JoySlider-mark[data-mark-active='true']::before {
+          background-color: white;
+        }
+
+        .JoySlider-thumb {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          background-color: #fefefe;
+          transform: translateX(-50%);
+          touch-action: none;
+        }
+
+        .JoySlider-thumb::before {
+          position: absolute;
+          content: '';
+          box-sizing: border-box;
+          border: 2px solid #0b6bcb;
+          border-radius: inherit;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        .JoySlider-thumb[data-dragging],
+        .JoySlider-thumb:focus-visible {
+          outline-offset: 0;
+          outline: 2px solid #0b6bcb;
+          outline-width: max(4px, 18px / 3.6);
+          outline-color: color-mix(in srgb, #0b6bcb 32%, transparent);
+        }
+
+        .SliderTooltip-trigger {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 0;
+          border-radius: 9999px;
+          opacity: 0;
+        }
+
+        .SliderTooltip-popup {
+          font-family: system-ui, sans-serif;
+          font-size: .875rem;
+          line-height: 1.5;
+          background-color: #636B74;
+          color: white;
+          padding-inline: .375rem;
+          border-radius: 2px;
+          opacity: 0;
+        }
+
+        .SliderTooltip-popup[data-open='true'] {
+          opacity: 1;
+        }
+
+        .SliderTooltip-arrow {
+          color: #555e68;
+          bottom: 0;
+          border: 4px solid;
+          border-color: currentColor;
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+          border-left-color: transparent;
+          left: 50%;
+          transform: translateY(100%);
+          background-color: transparent;
+        }
+      `}
+    </style>
+  );
+}
diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx
index 2b9243d326..9a44baa4bc 100644
--- a/docs/pages/experiments/slider.tsx
+++ b/docs/pages/experiments/slider.tsx
@@ -18,7 +18,10 @@ const axisProps = {
   },
 };
 
-export function TrackFill(props: any) {
+export const TrackFill = React.forwardRef(function TrackFill(
+  props: any,
+  ref: React.ForwardedRef<any>,
+) {
   // does not support inverted range fill! (yet)
   const { inverted = false, style, ...otherProps } = props;
 
@@ -52,6 +55,7 @@ export function TrackFill(props: any) {
     <span
       data-disabled={disabled}
       data-inverted={inverted}
+      ref={ref}
       {...otherProps}
       style={{
         ...internalStyles,
@@ -59,7 +63,7 @@ export function TrackFill(props: any) {
       }}
     />
   );
-}
+});
 
 export default function App() {
   const [val1, setVal1] = React.useState(50);
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 569c621e49..bb139419a9 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -222,6 +222,7 @@
     "inputs": "Inputs",
     "/base-ui/react-checkbox": "Checkbox",
     "/base-ui/react-number-field": "Number Field",
+    "/base-ui/react-slider": "Slider",
     "/base-ui/react-switch": "Switch",
     "data-display": "Data display",
     "/base-ui/react-tooltip": "Tooltip",
diff --git a/packages/mui-base/src/Slider/Root/useSliderRoot.ts b/packages/mui-base/src/Slider/Root/useSliderRoot.ts
index 136f4cf787..3b2f41f302 100644
--- a/packages/mui-base/src/Slider/Root/useSliderRoot.ts
+++ b/packages/mui-base/src/Slider/Root/useSliderRoot.ts
@@ -126,10 +126,14 @@ export function trackFinger(
 
 export const Identity = (x: any) => x;
 /**
+ *
+ * Demos:
+ *
+ * - [Slider](https://mui.com/base-ui/react-slider/#hooks)
  *
  * API:
  *
- * - [useSliderRoot API](https://mui.com/base-ui/api/use-slider-root/)
+ * - [useSliderRoot API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider-root)
  */
 function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
   const {
diff --git a/packages/mui-base/src/Slider/SliderOutput/useSliderOutput.ts b/packages/mui-base/src/Slider/SliderOutput/useSliderOutput.ts
index b6f1b1b380..250474ad50 100644
--- a/packages/mui-base/src/Slider/SliderOutput/useSliderOutput.ts
+++ b/packages/mui-base/src/Slider/SliderOutput/useSliderOutput.ts
@@ -3,10 +3,14 @@ import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { UseSliderOutputParameters, UseSliderOutputReturnValue } from './SliderOutput.types';
 /**
+ *
+ * Demos:
+ *
+ * - [Slider](https://mui.com/base-ui/react-slider/#hooks)
  *
  * API:
  *
- * - [useSliderOutput API](https://mui.com/base-ui/api/use-slider-output/)
+ * - [useSliderOutput API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider-output)
  */
 function useSliderOutput(parameters: UseSliderOutputParameters): UseSliderOutputReturnValue {
   const { 'aria-live': ariaLive = 'off', rootRef, subitems } = parameters;
diff --git a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
index 859743f20c..31cb81472a 100644
--- a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
+++ b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
@@ -21,10 +21,14 @@ function getNewValue(
   return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
 }
 /**
+ *
+ * Demos:
+ *
+ * - [Slider](https://mui.com/base-ui/react-slider/#hooks)
  *
  * API:
  *
- * - [useSliderThumb API](https://mui.com/base-ui/api/use-slider-thumb/)
+ * - [useSliderThumb API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider-thumb)
  */
 export function useSliderThumb(parameters: UseSliderThumbParameters) {
   const {
diff --git a/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts b/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts
index 785118e405..af9e2972cb 100644
--- a/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts
+++ b/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts
@@ -8,10 +8,14 @@ import { UseSliderTrackParameters, UseSliderTrackReturnValue } from './SliderTra
 
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 /**
+ *
+ * Demos:
+ *
+ * - [Slider](https://mui.com/base-ui/react-slider/#hooks)
  *
  * API:
  *
- * - [useSliderTrack API](https://mui.com/base-ui/api/use-slider-track/)
+ * - [useSliderTrack API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider-track)
  */
 export function useSliderTrack(parameters: UseSliderTrackParameters): UseSliderTrackReturnValue {
   const {
diff --git a/packages/mui-base/src/Slider/index.barrel.ts b/packages/mui-base/src/Slider/index.barrel.ts
index 96923bfb88..5c4c9981e4 100644
--- a/packages/mui-base/src/Slider/index.barrel.ts
+++ b/packages/mui-base/src/Slider/index.barrel.ts
@@ -1,13 +1,5 @@
 export { Slider } from './Root/SliderRoot';
-export type {
-  SliderRootOwnerState,
-  SliderRootProps,
-  UseSliderParameters,
-  UseSliderReturnValue,
-  SliderContextValue,
-  SliderProviderValue,
-  SliderThumbMetadata,
-} from './Root/SliderRoot.types';
+export type * from './Root/SliderRoot.types';
 export { useSliderRoot } from './Root/useSliderRoot';
 export * from './Root/SliderProvider';
 
diff --git a/packages/mui-base/src/Slider/index.ts b/packages/mui-base/src/Slider/index.ts
index 4fe9c2dc43..9e14a879af 100644
--- a/packages/mui-base/src/Slider/index.ts
+++ b/packages/mui-base/src/Slider/index.ts
@@ -7,6 +7,7 @@ export {
   SliderContextValue,
   SliderProviderValue,
   SliderThumbMetadata,
+  Axis,
 } from './Root/SliderRoot.types';
 export { useSliderRoot } from './Root/useSliderRoot';
 export * from './Root/SliderProvider';
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
index 22dcf73c98..c560528641 100644
--- a/packages/mui-base/src/useSlider/useSlider.ts
+++ b/packages/mui-base/src/useSlider/useSlider.ts
@@ -190,7 +190,7 @@ function doesSupportTouchActionNone() {
  *
  * Demos:
  *
- * - [Slider](https://mui.com/base-ui/react-slider/#hook)
+ * - [Slider](https://mui.com/base-ui/react-slider/#hooks)
  *
  * API:
  *