diff --git a/docs/src/app/(private)/experiments/slider/inset.mac.module.css b/docs/src/app/(private)/experiments/slider/inset.mac.module.css
new file mode 100644
index 0000000000..45985f4e07
--- /dev/null
+++ b/docs/src/app/(private)/experiments/slider/inset.mac.module.css
@@ -0,0 +1,74 @@
+.Slider {
+  --thumb-radius: 0.625rem;
+  --track-height: calc(var(--thumb-radius) * 2);
+  --track-width: 14rem;
+
+  --indicator-bg: white;
+  --track-bg: var(--color-gray-200);
+  --track-outer-border-color: var(--color-gray-400);
+
+  border: 1px solid var(--track-outer-border-color);
+  border-radius: 9999px;
+  background-color: var(--track-bg);
+
+  @media (prefers-color-scheme: dark) {
+    --track-bg: var(--color-gray-200);
+  }
+}
+
+.Control {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+  overflow-y: clip;
+  touch-action: none;
+  user-select: none;
+
+  border-radius: 9999px;
+  padding-inline: var(--thumb-radius);
+
+  &:focus-within {
+    overflow-y: revert-layer;
+  }
+}
+
+.Track {
+  width: var(--track-width);
+  height: var(--track-height);
+  user-select: none;
+}
+
+.Indicator {
+  background-color: var(--indicator-bg);
+  user-select: none;
+
+  &:before {
+    position: absolute;
+    content: '';
+    border-radius: 9999px 0 0 9999px;
+    height: var(--track-height);
+    width: var(--thumb-radius);
+    top: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-color: var(--indicator-bg);
+  }
+}
+
+.Thumb {
+  width: calc(var(--thumb-radius) * 2);
+  height: calc(var(--thumb-radius) * 2);
+  z-index: 1;
+  border-radius: 9999px;
+  background-color: white;
+  box-shadow: 0px 0px 3px 0px var(--color-gray-300);
+  user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+  }
+
+  &[data-dragging] {
+    box-shadow: 0px 0px 2px 1px var(--color-gray-300);
+  }
+}
diff --git a/docs/src/app/(private)/experiments/slider/inset.native.module.css b/docs/src/app/(private)/experiments/slider/inset.native.module.css
new file mode 100644
index 0000000000..eb9070f5f3
--- /dev/null
+++ b/docs/src/app/(private)/experiments/slider/inset.native.module.css
@@ -0,0 +1,83 @@
+.Slider {
+  --thumb-radius: 0.625rem;
+  --track-height: 0.5rem;
+  --track-width: 14rem;
+
+  --indicator-bg: var(--color-blue);
+  --thumb-bg: var(--color-blue);
+  --track-outer-border-color: var(--color-gray-400);
+
+  --track-bg: var(--color-gray-200);
+  --dragging-color: oklch(69% 50% 264);
+
+  border: 1px solid var(--track-outer-border-color);
+  border-radius: 9999px;
+  background-color: var(--track-bg);
+
+  @media (prefers-color-scheme: dark) {
+    --track-bg: var(--color-gray-200);
+    --dragging-color: blue;
+  }
+}
+
+.Control {
+  box-sizing: border-box;
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  z-index: 1;
+
+  border-radius: 9999px;
+  padding-inline: var(--thumb-radius);
+}
+
+.Track {
+  width: var(--track-width);
+  height: var(--track-height);
+  user-select: none;
+}
+
+.Indicator {
+  background-color: var(--indicator-bg);
+  user-select: none;
+
+  &:before {
+    position: absolute;
+    content: '';
+    border-radius: 9999px 0 0 9999px;
+    height: var(--track-height);
+    width: var(--thumb-radius);
+    top: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-color: var(--indicator-bg);
+  }
+
+  &[data-dragging] {
+    background-color: var(--dragging-color);
+
+    &:before {
+      background-color: var(--dragging-color);
+    }
+  }
+}
+
+.Thumb {
+  width: calc(var(--thumb-radius) * 2);
+  height: calc(var(--thumb-radius) * 2);
+  z-index: 1;
+  border-radius: 100%;
+  background-color: var(--indicator-bg);
+
+  user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: 2px;
+  }
+
+  &[data-dragging] {
+    background-color: var(--dragging-color);
+    box-shadow: 0 0 0 1px var(--dragging-color);
+  }
+}
diff --git a/docs/src/app/(private)/experiments/slider/inset.tsx b/docs/src/app/(private)/experiments/slider/inset.tsx
new file mode 100644
index 0000000000..9a481b0df0
--- /dev/null
+++ b/docs/src/app/(private)/experiments/slider/inset.tsx
@@ -0,0 +1,43 @@
+'use client';
+import * as React from 'react';
+import { Slider } from '@base-ui-components/react/slider';
+import '../../../../demo-theme.css';
+import macStyles from './inset.mac.module.css';
+import nativeStyles from './inset.native.module.css';
+
+const styles = {
+  mac: macStyles,
+  native: nativeStyles,
+};
+
+export default function InsetSliders() {
+  return (
+    <div
+      style={{
+        alignSelf: 'center',
+        marginTop: '40vh',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2rem',
+      }}
+    >
+      <Slider.Root className={styles.mac.Slider} defaultValue={25}>
+        <Slider.Control className={styles.mac.Control}>
+          <Slider.Track className={styles.mac.Track}>
+            <Slider.Indicator className={styles.mac.Indicator} />
+            <Slider.Thumb className={styles.mac.Thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
+
+      <Slider.Root className={styles.native.Slider} defaultValue={25}>
+        <Slider.Control className={styles.native.Control}>
+          <Slider.Track className={styles.native.Track}>
+            <Slider.Indicator className={styles.native.Indicator} />
+            <Slider.Thumb className={styles.native.Thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
+    </div>
+  );
+}