Slider sets CSS writing-mode

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,11 +22,34 @@ export default function VerticalSlider() {
       <Slider
         getAriaLabel={() => 'Temperature'}
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         defaultValue={[20, 37]}
         valueLabelDisplay="auto"
         marks={marks}
       />
     </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',
+  },
+];

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,11 +22,34 @@ export default function VerticalSlider() {
       <Slider
         getAriaLabel={() => 'Temperature'}
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         defaultValue={[20, 37]}
         valueLabelDisplay="auto"
         marks={marks}
       />
     </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',
+  },
+];

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
 

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,
       },
     };
   };