From f3e90f35ba5f56bbcf1fa3ffff66e7756790d6ee Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 12 Sep 2024 21:19:36 +0800
Subject: [PATCH] Update demos

---
 docs/data/components/slider/RangeSlider.js    | 188 ++++--------------
 docs/data/components/slider/RangeSlider.tsx   | 188 ++++--------------
 docs/data/components/slider/RtlSlider.js      | 153 +++-----------
 docs/data/components/slider/RtlSlider.tsx     | 151 +++-----------
 .../components/slider/RtlSlider.tsx.preview   |  10 -
 .../css-modules/index.js                      | 133 +------------
 .../css-modules/index.tsx                     | 133 +------------
 .../css-modules/index.tsx.preview             |  16 ++
 docs/data/components/slider/VerticalSlider.js | 134 +------------
 .../data/components/slider/VerticalSlider.tsx | 134 +------------
 docs/data/components/slider/styles.module.css |  99 +++++++++
 .../components/slider/vertical.module.css     | 106 ++++++++++
 12 files changed, 390 insertions(+), 1055 deletions(-)
 delete mode 100644 docs/data/components/slider/RtlSlider.tsx.preview
 create mode 100644 docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview
 create mode 100644 docs/data/components/slider/styles.module.css
 create mode 100644 docs/data/components/slider/vertical.module.css

diff --git a/docs/data/components/slider/RangeSlider.js b/docs/data/components/slider/RangeSlider.js
index f8b56822b3..ece3baa604 100644
--- a/docs/data/components/slider/RangeSlider.js
+++ b/docs/data/components/slider/RangeSlider.js
@@ -1,7 +1,8 @@
 'use client';
 import * as React from 'react';
-import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { useTheme } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
+import classes from './styles.module.css';
 
 export default function RangeSlider() {
   // Replace this with your app logic for determining dark mode
@@ -9,160 +10,59 @@ export default function RangeSlider() {
   const [value, setValue] = React.useState([20, 37]);
 
   return (
-    <Box
+    <div
       className={isDarkMode ? 'dark' : ''}
-      sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       {/* controlled: */}
-      <Slider
+      <Slider.Root
         value={value}
         onValueChange={setValue}
         aria-labelledby="ControlledRangeLabel"
+        className={classes.slider}
       >
-        <Label id="ControlledRangeLabel">Controlled Range</Label>
-        <SliderOutput />
-        <SliderControl>
-          <SliderTrack>
-            <SliderIndicator />
-            <SliderThumb />
-            <SliderThumb />
-          </SliderTrack>
-        </SliderControl>
-      </Slider>
+        {/*
+           we can't use a <label> element in a range slider since the `for` attribute
+           cannot reference more than one <input> element
+           although the html spec doesn't forbid <label> without `for`:
+           https://html.spec.whatwg.org/multipage/forms.html#the-label-element
+           eslint complains by default and a11y validators may complain e.g. WAVE
+          */}
+        <span id="ControlledRangeLabel" className={classes.label}>
+          Controlled Range
+        </span>
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
       {/* uncontrolled: */}
-      <Slider defaultValue={[20, 37]} aria-labelledby="UncontrolledRangeLabel">
-        <Label id="UncontrolledRangeLabel">Uncontrolled Range</Label>
-        <SliderOutput />
-        <SliderControl>
-          <SliderTrack>
-            <SliderIndicator />
-            <SliderThumb />
-            <SliderThumb />
-          </SliderTrack>
-        </SliderControl>
-      </Slider>
-    </Box>
+      <Slider.Root
+        defaultValue={[20, 37]}
+        aria-labelledby="UncontrolledRangeLabel"
+        className={classes.slider}
+      >
+        <span id="UncontrolledRangeLabel" className={classes.label}>
+          Uncontrolled Range
+        </span>
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
+    </div>
   );
 }
 
-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;
-  gap: 1rem;
-`;
-
-const SliderOutput = styled(BaseSlider.Output)`
-  text-align: right;
-`;
-
-const SliderControl = styled(BaseSlider.Control)`
-  grid-column: 1/3;
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 16px;
-  border-radius: 9999px;
-  touch-action: none;
-
-  &[data-disabled] {
-    cursor: not-allowed;
-  }
-`;
-
-const SliderTrack = styled(BaseSlider.Track)`
-  width: 100%;
-  height: 2px;
-  border-radius: 9999px;
-  background-color: ${grey[400]};
-  touch-action: none;
-
-  .dark & {
-    background-color: ${grey[700]};
-  }
-`;
-
-const SliderIndicator = styled(BaseSlider.Indicator)`
-  border-radius: 9999px;
-  background-color: black;
-
-  .dark & {
-    background-color: ${grey[100]};
-  }
-`;
-
-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;
-  }
-`;
-
-// we can't use a <label> element in a range slider since the `for` attribute
-// cannot reference more than one <input> element
-// the html spec doesn't forbid <label> without `for` https://html.spec.whatwg.org/multipage/forms.html#the-label-element
-// but eslint complains by default and a11y validators may complain e.g. WAVE
-const Label = styled('span')`
-  cursor: unset;
-  font-weight: bold;
-
-  &[data-disabled='true'] {
-    color: ${grey[600]};
-  }
-`;
diff --git a/docs/data/components/slider/RangeSlider.tsx b/docs/data/components/slider/RangeSlider.tsx
index ddb0cdabaa..aeb2e536e9 100644
--- a/docs/data/components/slider/RangeSlider.tsx
+++ b/docs/data/components/slider/RangeSlider.tsx
@@ -1,7 +1,8 @@
 'use client';
 import * as React from 'react';
-import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { useTheme } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
+import classes from './styles.module.css';
 
 export default function RangeSlider() {
   // Replace this with your app logic for determining dark mode
@@ -9,160 +10,59 @@ export default function RangeSlider() {
   const [value, setValue] = React.useState<number | number[]>([20, 37]);
 
   return (
-    <Box
+    <div
       className={isDarkMode ? 'dark' : ''}
-      sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       {/* controlled: */}
-      <Slider
+      <Slider.Root
         value={value}
         onValueChange={setValue}
         aria-labelledby="ControlledRangeLabel"
+        className={classes.slider}
       >
-        <Label id="ControlledRangeLabel">Controlled Range</Label>
-        <SliderOutput />
-        <SliderControl>
-          <SliderTrack>
-            <SliderIndicator />
-            <SliderThumb />
-            <SliderThumb />
-          </SliderTrack>
-        </SliderControl>
-      </Slider>
+        {/*
+          we can't use a <label> element in a range slider since the `for` attribute
+          cannot reference more than one <input> element
+          although the html spec doesn't forbid <label> without `for`:
+          https://html.spec.whatwg.org/multipage/forms.html#the-label-element
+          eslint complains by default and a11y validators may complain e.g. WAVE
+        */}
+        <span id="ControlledRangeLabel" className={classes.label}>
+          Controlled Range
+        </span>
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
       {/* uncontrolled: */}
-      <Slider defaultValue={[20, 37]} aria-labelledby="UncontrolledRangeLabel">
-        <Label id="UncontrolledRangeLabel">Uncontrolled Range</Label>
-        <SliderOutput />
-        <SliderControl>
-          <SliderTrack>
-            <SliderIndicator />
-            <SliderThumb />
-            <SliderThumb />
-          </SliderTrack>
-        </SliderControl>
-      </Slider>
-    </Box>
+      <Slider.Root
+        defaultValue={[20, 37]}
+        aria-labelledby="UncontrolledRangeLabel"
+        className={classes.slider}
+      >
+        <span id="UncontrolledRangeLabel" className={classes.label}>
+          Uncontrolled Range
+        </span>
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
+            <Slider.Thumb className={classes.thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
+    </div>
   );
 }
 
-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;
-  gap: 1rem;
-`;
-
-const SliderOutput = styled(BaseSlider.Output)`
-  text-align: right;
-`;
-
-const SliderControl = styled(BaseSlider.Control)`
-  grid-column: 1/3;
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 16px;
-  border-radius: 9999px;
-  touch-action: none;
-
-  &[data-disabled] {
-    cursor: not-allowed;
-  }
-`;
-
-const SliderTrack = styled(BaseSlider.Track)`
-  width: 100%;
-  height: 2px;
-  border-radius: 9999px;
-  background-color: ${grey[400]};
-  touch-action: none;
-
-  .dark & {
-    background-color: ${grey[700]};
-  }
-`;
-
-const SliderIndicator = styled(BaseSlider.Indicator)`
-  border-radius: 9999px;
-  background-color: black;
-
-  .dark & {
-    background-color: ${grey[100]};
-  }
-`;
-
-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;
-  }
-`;
-
-// we can't use a <label> element in a range slider since the `for` attribute
-// cannot reference more than one <input> element
-// the html spec doesn't forbid <label> without `for` https://html.spec.whatwg.org/multipage/forms.html#the-label-element
-// but eslint complains by default and a11y validators may complain e.g. WAVE
-const Label = styled('span')`
-  cursor: unset;
-  font-weight: bold;
-
-  &[data-disabled='true'] {
-    color: ${grey[600]};
-  }
-`;
diff --git a/docs/data/components/slider/RtlSlider.js b/docs/data/components/slider/RtlSlider.js
index 06ca1be3f2..43a7ff6a6e 100644
--- a/docs/data/components/slider/RtlSlider.js
+++ b/docs/data/components/slider/RtlSlider.js
@@ -1,31 +1,39 @@
 'use client';
 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';
+import * as Slider from '@base_ui/react/Slider';
+import { useTheme } from '@mui/system';
+import classes from './styles.module.css';
 
 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" direction="rtl">
-        <Label id="VolumeSliderLabel">Volume (RTL)</Label>
-        <SliderOutput />
-        <SliderControl>
-          <SliderTrack>
-            <SliderIndicator />
-            <SliderThumb />
-          </SliderTrack>
-        </SliderControl>
-      </Slider>
-    </Box>
+    <div className={isDarkMode ? 'dark' : ''} style={{ width: 320, margin: 32 }}>
+      <Slider.Root
+        defaultValue={50}
+        aria-labelledby="VolumeSliderLabel"
+        direction="rtl"
+        className={classes.slider}
+      >
+        <Label id="VolumeSliderLabel" className={classes.label}>
+          Volume (RTL)
+        </Label>
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
+    </div>
   );
 }
 
-function BaseLabel(props) {
+function Label(props) {
   const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+  const { inputIdMap, disabled } = Slider.useSliderContext();
 
   const htmlFor = inputIdMap.get(0);
 
@@ -34,122 +42,11 @@ function BaseLabel(props) {
   );
 }
 
-BaseLabel.propTypes = {
+Label.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;
-  gap: 1rem;
-`;
-
-const SliderOutput = styled(BaseSlider.Output)`
-  text-align: left;
-`;
-
-const SliderControl = styled(BaseSlider.Control)`
-  grid-column: 1/3;
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 16px;
-  border-radius: 9999px;
-  touch-action: none;
-
-  &[data-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-
-const SliderTrack = styled(BaseSlider.Track)`
-  width: 100%;
-  height: 2px;
-  border-radius: 9999px;
-  background-color: ${grey[400]};
-  touch-action: none;
-
-  .dark & {
-    background-color: ${grey[700]};
-  }
-`;
-
-const SliderIndicator = styled(BaseSlider.Indicator)`
-  border-radius: 9999px;
-  background-color: black;
-
-  .dark & {
-    background-color: ${grey[100]};
-  }
-`;
-
-const SliderThumb = styled(BaseSlider.Thumb)`
-  width: 16px;
-  height: 16px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  background-color: black;
-  touch-action: none;
-
-  &:focus-visible {
-    outline: 2px solid black;
-    outline-offset: 2px;
-  }
-
-  .dark & {
-    background-color: ${grey[100]};
-  }
-
-  .dark &:focus-visible {
-    outline-color: ${grey[300]};
-    outline-width: 1px;
-    outline-offset: 3px;
-  }
-
-  &[data-dragging='true'] {
-    background-color: pink;
-  }
-
-  &[data-disabled='true'],
-  .dark &[data-disabled='true'] {
-    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/components/slider/RtlSlider.tsx b/docs/data/components/slider/RtlSlider.tsx
index 45a4c15f56..c0f646e12e 100644
--- a/docs/data/components/slider/RtlSlider.tsx
+++ b/docs/data/components/slider/RtlSlider.tsx
@@ -1,30 +1,38 @@
 'use client';
 import * as React from 'react';
-import * as BaseSlider from '@base_ui/react/Slider';
-import { styled, useTheme, Box } from '@mui/system';
+import * as Slider from '@base_ui/react/Slider';
+import { useTheme } from '@mui/system';
+import classes from './styles.module.css';
 
 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" direction="rtl">
-        <Label id="VolumeSliderLabel">Volume (RTL)</Label>
-        <SliderOutput />
-        <SliderControl>
-          <SliderTrack>
-            <SliderIndicator />
-            <SliderThumb />
-          </SliderTrack>
-        </SliderControl>
-      </Slider>
-    </Box>
+    <div className={isDarkMode ? 'dark' : ''} style={{ width: 320, margin: 32 }}>
+      <Slider.Root
+        defaultValue={50}
+        aria-labelledby="VolumeSliderLabel"
+        direction="rtl"
+        className={classes.slider}
+      >
+        <Label id="VolumeSliderLabel" className={classes.label}>
+          Volume (RTL)
+        </Label>
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>
+    </div>
   );
 }
 
-function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
+function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
   const { id, ...otherProps } = props;
-  const { inputIdMap, disabled } = BaseSlider.useSliderContext();
+  const { inputIdMap, disabled } = Slider.useSliderContext();
 
   const htmlFor = inputIdMap.get(0);
 
@@ -33,118 +41,7 @@ function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
   );
 }
 
-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;
-  gap: 1rem;
-`;
-
-const SliderOutput = styled(BaseSlider.Output)`
-  text-align: left;
-`;
-
-const SliderControl = styled(BaseSlider.Control)`
-  grid-column: 1/3;
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 16px;
-  border-radius: 9999px;
-  touch-action: none;
-
-  &[data-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-
-const SliderTrack = styled(BaseSlider.Track)`
-  width: 100%;
-  height: 2px;
-  border-radius: 9999px;
-  background-color: ${grey[400]};
-  touch-action: none;
-
-  .dark & {
-    background-color: ${grey[700]};
-  }
-`;
-
-const SliderIndicator = styled(BaseSlider.Indicator)`
-  border-radius: 9999px;
-  background-color: black;
-
-  .dark & {
-    background-color: ${grey[100]};
-  }
-`;
-
-const SliderThumb = styled(BaseSlider.Thumb)`
-  width: 16px;
-  height: 16px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  background-color: black;
-  touch-action: none;
-
-  &:focus-visible {
-    outline: 2px solid black;
-    outline-offset: 2px;
-  }
-
-  .dark & {
-    background-color: ${grey[100]};
-  }
-
-  .dark &:focus-visible {
-    outline-color: ${grey[300]};
-    outline-width: 1px;
-    outline-offset: 3px;
-  }
-
-  &[data-dragging='true'] {
-    background-color: pink;
-  }
-
-  &[data-disabled='true'],
-  .dark &[data-disabled='true'] {
-    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/components/slider/RtlSlider.tsx.preview b/docs/data/components/slider/RtlSlider.tsx.preview
deleted file mode 100644
index ec8ede2676..0000000000
--- a/docs/data/components/slider/RtlSlider.tsx.preview
+++ /dev/null
@@ -1,10 +0,0 @@
-<Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" direction="rtl">
-  <Label id="VolumeSliderLabel">Volume (RTL)</Label>
-  <SliderOutput />
-  <SliderControl>
-    <SliderTrack>
-      <SliderIndicator />
-      <SliderThumb />
-    </SliderTrack>
-  </SliderControl>
-</Slider>
\ No newline at end of file
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
index 574fd861ec..d8442d2af0 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider';
+import classes from '../../styles.module.css';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
@@ -13,22 +14,21 @@ export default function UnstyledSliderIntroduction() {
       style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider.Root
-        className="Slider"
+        className={classes.slider}
         defaultValue={50}
         aria-labelledby="VolumeSliderLabel"
       >
-        <Label id="VolumeSliderLabel" className="Slider-label">
+        <Label id="VolumeSliderLabel" className={classes.label}>
           Volume
         </Label>
-        <Slider.Output className="Slider-output" />
-        <Slider.Control className="Slider-control">
-          <Slider.Track className="Slider-track">
-            <Slider.Indicator className="Slider-indicator" />
-            <Slider.Thumb className="Slider-thumb" />
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
-      <Styles />
     </div>
   );
 }
@@ -48,124 +48,7 @@ Label.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';
 }
-
-function Styles() {
-  return (
-    <style suppressHydrationWarning>{`
-    .Slider {
-      font-family: IBM Plex Sans, sans-serif;
-      font-size: 1rem;
-      width: 100%;
-      align-items: center;
-      position: relative;
-      -webkit-tap-highlight-color: transparent;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1rem;
-    }
-
-    .Slider-output {
-      text-align: right;
-    }
-
-    .Slider-control {
-      grid-column: 1/3;
-      display: flex;
-      align-items: center;
-      position: relative;
-      width: 100%;
-      height: 16px;
-      border-radius: 9999px;
-      touch-action: none;
-    }
-
-    .Slider-track {
-      width: 100%;
-      height: 2px;
-      border-radius: 9999px;
-      background-color: ${grey[400]};
-      touch-action: none;
-    }
-
-    .dark .Slider-track {
-      background-color: ${grey[700]};
-    }
-
-    .Slider-control[data-disabled] {
-      cursor: not-allowed;
-    }
-
-    .Slider-indicator {
-      height: 2px;
-      border-radius: 9999px;
-      background-color: black;
-    }
-
-    .dark .Slider-indicator {
-      background-color: ${grey[100]};
-    }
-
-    .Slider-thumb {
-      width: 16px;
-      height: 16px;
-      box-sizing: border-box;
-      border-radius: 50%;
-      background-color: black;
-      touch-action: none;
-
-      &:focus-visible {
-        outline: 2px solid black;
-        outline-offset: 2px;
-      }
-
-      &[data-dragging] {
-        background-color: pink;
-      }
-
-      &[data-disabled] {
-        background-color: ${grey[300]};
-      }
-    }
-
-    .dark .Slider-thumb {
-      background-color: ${grey[100]};
-
-      &:focus-visible {
-        outline-color: ${grey[300]};
-        outline-width: 1px;
-        outline-offset: 3px;
-      }
-
-      &[data-disabled] {
-        background-color: ${grey[600]};
-      }
-    }
-
-    .Slider-label {
-      cursor: unset;
-      font-weight: bold;
-    }
-
-    .Slider-label[data-disabled='true'] {
-      color: ${grey[600]};
-    }
-    `}</style>
-  );
-}
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
index b9138dac79..a1392d6b23 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/system';
 import * as Slider from '@base_ui/react/Slider';
+import classes from '../../styles.module.css';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
@@ -12,22 +13,21 @@ export default function UnstyledSliderIntroduction() {
       style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
     >
       <Slider.Root
-        className="Slider"
+        className={classes.slider}
         defaultValue={50}
         aria-labelledby="VolumeSliderLabel"
       >
-        <Label id="VolumeSliderLabel" className="Slider-label">
+        <Label id="VolumeSliderLabel" className={classes.label}>
           Volume
         </Label>
-        <Slider.Output className="Slider-output" />
-        <Slider.Control className="Slider-control">
-          <Slider.Track className="Slider-track">
-            <Slider.Indicator className="Slider-indicator" />
-            <Slider.Thumb className="Slider-thumb" />
+        <Slider.Output className={classes.output} />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
           </Slider.Track>
         </Slider.Control>
       </Slider.Root>
-      <Styles />
     </div>
   );
 }
@@ -43,124 +43,7 @@ function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
   );
 }
 
-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';
 }
-
-function Styles() {
-  return (
-    <style suppressHydrationWarning>{`
-    .Slider {
-      font-family: IBM Plex Sans, sans-serif;
-      font-size: 1rem;
-      width: 100%;
-      align-items: center;
-      position: relative;
-      -webkit-tap-highlight-color: transparent;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1rem;
-    }
-
-    .Slider-output {
-      text-align: right;
-    }
-
-    .Slider-control {
-      grid-column: 1/3;
-      display: flex;
-      align-items: center;
-      position: relative;
-      width: 100%;
-      height: 16px;
-      border-radius: 9999px;
-      touch-action: none;
-    }
-
-    .Slider-track {
-      width: 100%;
-      height: 2px;
-      border-radius: 9999px;
-      background-color: ${grey[400]};
-      touch-action: none;
-    }
-
-    .dark .Slider-track {
-      background-color: ${grey[700]};
-    }
-
-    .Slider-control[data-disabled] {
-      cursor: not-allowed;
-    }
-
-    .Slider-indicator {
-      height: 2px;
-      border-radius: 9999px;
-      background-color: black;
-    }
-
-    .dark .Slider-indicator {
-      background-color: ${grey[100]};
-    }
-
-    .Slider-thumb {
-      width: 16px;
-      height: 16px;
-      box-sizing: border-box;
-      border-radius: 50%;
-      background-color: black;
-      touch-action: none;
-
-      &:focus-visible {
-        outline: 2px solid black;
-        outline-offset: 2px;
-      }
-
-      &[data-dragging] {
-        background-color: pink;
-      }
-
-      &[data-disabled] {
-        background-color: ${grey[300]};
-      }
-    }
-
-    .dark .Slider-thumb {
-      background-color: ${grey[100]};
-
-      &:focus-visible {
-        outline-color: ${grey[300]};
-        outline-width: 1px;
-        outline-offset: 3px;
-      }
-
-      &[data-disabled] {
-        background-color: ${grey[600]};
-      }
-    }
-
-    .Slider-label {
-      cursor: unset;
-      font-weight: bold;
-    }
-
-    .Slider-label[data-disabled='true'] {
-      color: ${grey[600]};
-    }
-    `}</style>
-  );
-}
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview
new file mode 100644
index 0000000000..e31ceef081
--- /dev/null
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx.preview
@@ -0,0 +1,16 @@
+<Slider.Root
+  className={classes.slider}
+  defaultValue={50}
+  aria-labelledby="VolumeSliderLabel"
+>
+  <Label id="VolumeSliderLabel" className={classes.label}>
+    Volume
+  </Label>
+  <Slider.Output className={classes.output} />
+  <Slider.Control className={classes.control}>
+    <Slider.Track className={classes.track}>
+      <Slider.Indicator className={classes.indicator} />
+      <Slider.Thumb className={classes.thumb} />
+    </Slider.Track>
+  </Slider.Control>
+</Slider.Root>
\ No newline at end of file
diff --git a/docs/data/components/slider/VerticalSlider.js b/docs/data/components/slider/VerticalSlider.js
index 3f9ee01a8a..41e9573826 100644
--- a/docs/data/components/slider/VerticalSlider.js
+++ b/docs/data/components/slider/VerticalSlider.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import * as Slider from '@base_ui/react/Slider';
 import { useTheme } from '@mui/system';
+import classes from './vertical.module.css';
 
 export default function VerticalSlider() {
   // Replace this with your app logic for determining dark mode
@@ -13,129 +14,23 @@ export default function VerticalSlider() {
         defaultValue={50}
         orientation="vertical"
         aria-labelledby="VolumeSliderLabel"
-        className="VerticalSlider"
+        className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className="Label">
+        <Label id="VolumeSliderLabel" className={classes.label}>
           Volume
         </Label>
-        <Slider.Control className="VerticalSlider-control">
-          <Slider.Track className="VerticalSlider-track">
-            <Slider.Indicator className="VerticalSlider-indicator" />
-            <Slider.Thumb className="VerticalSlider-thumb" />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
           </Slider.Track>
         </Slider.Control>
-        <Slider.Output className="VerticalSlider-output" />
+        <Slider.Output className={classes.output} />
       </Slider.Root>
-      <Styles />
     </div>
   );
 }
 
-function Styles() {
-  return (
-    <style suppressHydrationWarning>{`
-      .VerticalSlider {
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 1rem;
-        height: 100%;
-        width: 5rem;
-        align-items: center;
-        position: relative;
-        -webkit-tap-highlight-color: transparent;
-        display: flex;
-        flex-flow: column-reverse nowrap;
-        gap: 1rem;
-      }
-
-      .VerticalSlider-output {
-        font-size: 1.125rem;
-      }
-
-      .VerticalSlider-control {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        position: relative;
-        width: 16px;
-        height: 300px;
-        border-radius: 9999px;
-        touch-action: none;
-      }
-
-      .VerticalSlider-control[data-disabled='true'] {
-        cursor: not-allowed;
-      }
-
-      .VerticalSlider-track {
-        height: 100%;
-        width: 2px;
-        border-radius: 9999px;
-        background-color: ${grey[400]};
-        touch-action: none;
-      }
-
-      .dark .VerticalSlider-track {
-        background-color: ${grey[700]};
-      }
-
-      .VerticalSlider-indicator {
-        border-radius: 9999px;
-        background-color: black;
-      }
-
-      .dark .VerticalSlider-indicator {
-        background-color: ${grey[100]};
-      }
-
-      .VerticalSlider-thumb {
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        box-sizing: border-box;
-        border-radius: 50%;
-        background-color: black;
-        transform: translateY(50%);
-        touch-action: none;
-      }
-
-      .VerticalSlider-thumb[data-dragging='true'],
-      .dark .VerticalSlider-thumb[data-dragging='true'] {
-        background-color: pink;
-      }
-
-      .dark .VerticalSlider-thumb {
-        background-color: ${grey[100]};
-      }
-
-      .VerticalSlider-thumb:focus-visible {
-        outline: 2px solid black;
-        outline-offset: 2px;
-      }
-
-      .dark .VerticalSlider-thumb:focus-visible {
-        outline-color: ${grey[300]};
-        outline-width: 1px;
-        outline-offset: 3px;
-      }
-
-      .VerticalSlider-thumb[data-disabled='true'] {
-        background-color: ${grey[600]};
-      }
-
-      .Label {
-        cursor: unset;
-        font-weight: 700;
-        font-size: 1rem;
-        color: inherit;
-      }
-
-      .Label[data-disabled='true'] {
-        color: ${grey[600]};
-      }
-    `}</style>
-  );
-}
-
 function Label(props) {
   const { id, ...otherProps } = props;
   const { inputIdMap, disabled } = Slider.useSliderContext();
@@ -155,16 +50,3 @@ function useIsDarkMode() {
   const theme = useTheme();
   return theme.palette.mode === 'dark';
 }
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
diff --git a/docs/data/components/slider/VerticalSlider.tsx b/docs/data/components/slider/VerticalSlider.tsx
index 3785c5fe29..059ef44a37 100644
--- a/docs/data/components/slider/VerticalSlider.tsx
+++ b/docs/data/components/slider/VerticalSlider.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import * as Slider from '@base_ui/react/Slider';
 import { useTheme } from '@mui/system';
+import classes from './vertical.module.css';
 
 export default function VerticalSlider() {
   // Replace this with your app logic for determining dark mode
@@ -12,129 +13,23 @@ export default function VerticalSlider() {
         defaultValue={50}
         orientation="vertical"
         aria-labelledby="VolumeSliderLabel"
-        className="VerticalSlider"
+        className={classes.slider}
       >
-        <Label id="VolumeSliderLabel" className="Label">
+        <Label id="VolumeSliderLabel" className={classes.label}>
           Volume
         </Label>
-        <Slider.Control className="VerticalSlider-control">
-          <Slider.Track className="VerticalSlider-track">
-            <Slider.Indicator className="VerticalSlider-indicator" />
-            <Slider.Thumb className="VerticalSlider-thumb" />
+        <Slider.Control className={classes.control}>
+          <Slider.Track className={classes.track}>
+            <Slider.Indicator className={classes.indicator} />
+            <Slider.Thumb className={classes.thumb} />
           </Slider.Track>
         </Slider.Control>
-        <Slider.Output className="VerticalSlider-output" />
+        <Slider.Output className={classes.output} />
       </Slider.Root>
-      <Styles />
     </div>
   );
 }
 
-function Styles() {
-  return (
-    <style suppressHydrationWarning>{`
-      .VerticalSlider {
-        font-family: 'IBM Plex Sans', sans-serif;
-        font-size: 1rem;
-        height: 100%;
-        width: 5rem;
-        align-items: center;
-        position: relative;
-        -webkit-tap-highlight-color: transparent;
-        display: flex;
-        flex-flow: column-reverse nowrap;
-        gap: 1rem;
-      }
-
-      .VerticalSlider-output {
-        font-size: 1.125rem;
-      }
-
-      .VerticalSlider-control {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        position: relative;
-        width: 16px;
-        height: 300px;
-        border-radius: 9999px;
-        touch-action: none;
-      }
-
-      .VerticalSlider-control[data-disabled='true'] {
-        cursor: not-allowed;
-      }
-
-      .VerticalSlider-track {
-        height: 100%;
-        width: 2px;
-        border-radius: 9999px;
-        background-color: ${grey[400]};
-        touch-action: none;
-      }
-
-      .dark .VerticalSlider-track {
-        background-color: ${grey[700]};
-      }
-
-      .VerticalSlider-indicator {
-        border-radius: 9999px;
-        background-color: black;
-      }
-
-      .dark .VerticalSlider-indicator {
-        background-color: ${grey[100]};
-      }
-
-      .VerticalSlider-thumb {
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        box-sizing: border-box;
-        border-radius: 50%;
-        background-color: black;
-        transform: translateY(50%);
-        touch-action: none;
-      }
-
-      .VerticalSlider-thumb[data-dragging='true'],
-      .dark .VerticalSlider-thumb[data-dragging='true'] {
-        background-color: pink;
-      }
-
-      .dark .VerticalSlider-thumb {
-        background-color: ${grey[100]};
-      }
-
-      .VerticalSlider-thumb:focus-visible {
-        outline: 2px solid black;
-        outline-offset: 2px;
-      }
-
-      .dark .VerticalSlider-thumb:focus-visible {
-        outline-color: ${grey[300]};
-        outline-width: 1px;
-        outline-offset: 3px;
-      }
-
-      .VerticalSlider-thumb[data-disabled='true'] {
-        background-color: ${grey[600]};
-      }
-
-      .Label {
-        cursor: unset;
-        font-weight: 700;
-        font-size: 1rem;
-        color: inherit;
-      }
-
-      .Label[data-disabled='true'] {
-        color: ${grey[600]};
-      }
-    `}</style>
-  );
-}
-
 function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
   const { id, ...otherProps } = props;
   const { inputIdMap, disabled } = Slider.useSliderContext();
@@ -150,16 +45,3 @@ function useIsDarkMode() {
   const theme = useTheme();
   return theme.palette.mode === 'dark';
 }
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
diff --git a/docs/data/components/slider/styles.module.css b/docs/data/components/slider/styles.module.css
new file mode 100644
index 0000000000..99aecc36a3
--- /dev/null
+++ b/docs/data/components/slider/styles.module.css
@@ -0,0 +1,99 @@
+.slider {
+  font-family:
+    IBM Plex Sans,
+    sans-serif;
+  font-size: 1rem;
+  width: 100%;
+  align-items: center;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.output {
+  text-align: right;
+}
+
+.control {
+  grid-column: 1/3;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 16px;
+  border-radius: 9999px;
+  touch-action: none;
+}
+
+.track {
+  width: 100%;
+  height: 2px;
+  border-radius: 9999px;
+  background-color: var(--gray-400);
+  touch-action: none;
+}
+
+.dark .track {
+  background-color: var(--gray-700);
+}
+
+.control[data-disabled] {
+  cursor: not-allowed;
+}
+
+.indicator {
+  height: 2px;
+  border-radius: 9999px;
+  background-color: var(--gray-900);
+}
+
+.dark .indicator {
+  background-color: var(--gray-100);
+}
+
+.thumb {
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: var(--gray-900);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--gray-900);
+    outline-offset: 2px;
+  }
+
+  &[data-dragging] {
+    background-color: pink;
+  }
+
+  &[data-disabled] {
+    background-color: var(--gray-300);
+  }
+}
+
+.dark .thumb {
+  background-color: var(--gray-100);
+
+  &:focus-visible {
+    outline-color: var(--gray-300);
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-disabled] {
+    background-color: var(--gray-600);
+  }
+}
+
+.label {
+  cursor: unset;
+  font-weight: bold;
+}
+
+.label[data-disabled='true'] {
+  color: var(--gray-600);
+}
diff --git a/docs/data/components/slider/vertical.module.css b/docs/data/components/slider/vertical.module.css
new file mode 100644
index 0000000000..e4b21c8497
--- /dev/null
+++ b/docs/data/components/slider/vertical.module.css
@@ -0,0 +1,106 @@
+.slider {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
+  height: 100%;
+  width: 5rem;
+  align-items: center;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  gap: 1rem;
+}
+
+.output {
+  font-size: 1.125rem;
+}
+
+.control {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  position: relative;
+  width: 16px;
+  height: 300px;
+  border-radius: 9999px;
+  touch-action: none;
+}
+
+.track {
+  height: 100%;
+  width: 2px;
+  border-radius: 9999px;
+  background-color: var(--gray-400);
+  touch-action: none;
+}
+
+.dark .track {
+  background-color: var(--gray-700);
+}
+
+.control[data-disabled] {
+  cursor: not-allowed;
+}
+
+.indicator {
+  border-radius: 9999px;
+  background-color: var(--gray-900);
+}
+
+.dark .indicator {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: var(--gray-900);
+  transform: translateY(50%);
+  touch-action: none;
+}
+
+.thumb {
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background-color: var(--gray-900);
+  touch-action: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--gray-900);
+    outline-offset: 2px;
+  }
+
+  &[data-dragging] {
+    background-color: pink;
+  }
+
+  &[data-disabled] {
+    background-color: var(--gray-300);
+  }
+}
+
+.dark .thumb {
+  background-color: var(--gray-100);
+
+  &:focus-visible {
+    outline-color: var(--gray-300);
+    outline-width: 1px;
+    outline-offset: 3px;
+  }
+
+  &[data-disabled] {
+    background-color: var(--gray-600);
+  }
+}
+
+.label {
+  cursor: unset;
+  font-weight: 700;
+  font-size: 1rem;
+  color: inherit;
+}
+
+.label[data-disabled='true'] {
+  color: var(--gray-600);
+}