diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.js b/docs/data/material/components/slider/VerticalAccessibleSlider.js
deleted file mode 100644
index e9892bcc838cdd..00000000000000
--- a/docs/data/material/components/slider/VerticalAccessibleSlider.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-export default function VerticalAccessibleSlider() {
-  function preventHorizontalKeyboardNavigation(event) {
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-      event.preventDefault();
-    }
-  }
-
-  return (
-    <Box sx={{ height: 300 }}>
-      <Slider
-        sx={{
-          '& input[type="range"]': {
-            WebkitAppearance: 'slider-vertical',
-          },
-        }}
-        orientation="vertical"
-        defaultValue={30}
-        aria-label="Temperature"
-        valueLabelDisplay="auto"
-        onKeyDown={preventHorizontalKeyboardNavigation}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx b/docs/data/material/components/slider/VerticalAccessibleSlider.tsx
deleted file mode 100644
index bc66892e7f20b3..00000000000000
--- a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Slider from '@mui/material/Slider';
-
-export default function VerticalAccessibleSlider() {
-  function preventHorizontalKeyboardNavigation(event: React.KeyboardEvent) {
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-      event.preventDefault();
-    }
-  }
-
-  return (
-    <Box sx={{ height: 300 }}>
-      <Slider
-        sx={{
-          '& input[type="range"]': {
-            WebkitAppearance: 'slider-vertical',
-          },
-        }}
-        orientation="vertical"
-        defaultValue={30}
-        aria-label="Temperature"
-        valueLabelDisplay="auto"
-        onKeyDown={preventHorizontalKeyboardNavigation}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview b/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview
deleted file mode 100644
index 2f23a0596d7eee..00000000000000
--- a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-<Slider
-  sx={{
-    '& input[type="range"]': {
-      WebkitAppearance: 'slider-vertical',
-    },
-  }}
-  orientation="vertical"
-  defaultValue={30}
-  aria-label="Temperature"
-  valueLabelDisplay="auto"
-  onKeyDown={preventHorizontalKeyboardNavigation}
-/>
\ No newline at end of file
diff --git a/docs/data/material/components/slider/VerticalSlider.js b/docs/data/material/components/slider/VerticalSlider.js
index 502b71bdb8bb65..5ae94100d85d93 100644
--- a/docs/data/material/components/slider/VerticalSlider.js
+++ b/docs/data/material/components/slider/VerticalSlider.js
@@ -2,36 +2,13 @@ import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Slider from '@mui/material/Slider';
 
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
 export default function VerticalSlider() {
   return (
     <Stack sx={{ height: 300 }} spacing={1} direction="row">
       <Slider
         aria-label="Temperature"
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         valueLabelDisplay="auto"
         defaultValue={30}
       />
@@ -45,7 +22,7 @@ export default function VerticalSlider() {
       <Slider
         getAriaLabel={() => 'Temperature'}
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         defaultValue={[20, 37]}
         valueLabelDisplay="auto"
         marks={marks}
@@ -53,3 +30,26 @@ export default function VerticalSlider() {
     </Stack>
   );
 }
+
+function getAriaValueText(value) {
+  return `${value}°C`;
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
diff --git a/docs/data/material/components/slider/VerticalSlider.tsx b/docs/data/material/components/slider/VerticalSlider.tsx
index 2f4e4ffa167ca8..743b7103b07703 100644
--- a/docs/data/material/components/slider/VerticalSlider.tsx
+++ b/docs/data/material/components/slider/VerticalSlider.tsx
@@ -2,36 +2,13 @@ import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Slider from '@mui/material/Slider';
 
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
 export default function VerticalSlider() {
   return (
     <Stack sx={{ height: 300 }} spacing={1} direction="row">
       <Slider
         aria-label="Temperature"
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         valueLabelDisplay="auto"
         defaultValue={30}
       />
@@ -45,7 +22,7 @@ export default function VerticalSlider() {
       <Slider
         getAriaLabel={() => 'Temperature'}
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         defaultValue={[20, 37]}
         valueLabelDisplay="auto"
         marks={marks}
@@ -53,3 +30,26 @@ export default function VerticalSlider() {
     </Stack>
   );
 }
+
+function getAriaValueText(value: number) {
+  return `${value}°C`;
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md
index aa6afc620b1e17..42824d7f6e7391 100644
--- a/docs/data/material/components/slider/slider.md
+++ b/docs/data/material/components/slider/slider.md
@@ -98,17 +98,22 @@ You can learn more about this in the [overrides documentation page](/material-ui
 
 ## Vertical sliders
 
+Set the `orientation` prop to `"vertical"` to create vertical sliders. The thumb will track vertical movement instead of horizontal movement.
+
 {{"demo": "VerticalSlider.js"}}
 
-**WARNING**: Chrome, Safari and newer Edge versions that is any browser based on WebKit exposes `<Slider orientation="vertical" />` as horizontal ([chromium issue #40736841](https://issues.chromium.org/issues/40736841)).
-By applying `-webkit-appearance: slider-vertical;` the slider is exposed as vertical.
+:::warning
+Chrome versions below 124 implements `aria-orientation` incorrrectly for vertical sliders and exposes them as `'horizontal'` in the accessibility tree. ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841))
 
-However, by applying `-webkit-appearance: slider-vertical;` keyboard navigation for horizontal keys (<kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd>) is reversed ([chromium issue #40739626](https://issues.chromium.org/issues/40739626)).
-Usually, up and right should increase and left and down should decrease the value.
-If you apply `-webkit-appearance` you could prevent keyboard navigation for horizontal arrow keys for a truly vertical slider.
-This might be less confusing to users compared to a change in direction.
+The `-webkit-appearance: slider-vertical` CSS property can be used to correct this for these older versions, with the trade-off of causing a console warning in newer Chrome versions:
+```css
+.MuiSlider-thumb > input {
+  -webkit-appearance: slider-vertical;
+}
+```
 
-{{"demo": "VerticalAccessibleSlider.js"}}
+For Chrome 124 and newer, the slider includes the CSS [`writing-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls#range_sliders_meters_and_progress_bars) property that fixes this bug.
+:::
 
 ## Marks placement
 
diff --git a/packages/mui-material/src/Slider/useSlider.ts b/packages/mui-material/src/Slider/useSlider.ts
index 0cd7ba016c3387..3c3bcf4f4bb7c2 100644
--- a/packages/mui-material/src/Slider/useSlider.ts
+++ b/packages/mui-material/src/Slider/useSlider.ts
@@ -687,6 +687,13 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     };
   };
 
+  const cssWritingMode = React.useMemo(() => {
+    if (orientation === 'vertical') {
+      return isRtl ? 'vertical-rl' : 'vertical-lr';
+    }
+    return undefined;
+  }, [isRtl, orientation]);
+
   const getHiddenInputProps = <ExternalProps extends Record<string, unknown> = {}>(
     externalProps: ExternalProps = {} as ExternalProps,
   ): UseSliderHiddenInputProps<ExternalProps> => {
@@ -724,6 +731,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
         // So that VoiceOver's focus indicator matches the thumb's dimensions
         width: '100%',
         height: '100%',
+        writingMode: cssWritingMode,
       },
     };
   };