Apply CSS writing mode on input element

docs/data/components/slider/slider.mdx

@@ -171,6 +171,18 @@ To create vertical sliders, set the `orientation` prop to `"vertical"`. This wil
 
 <Demo demo="VerticalSlider" />
 
+<Callout type="warning">
+  Chrome versions below 124 does not implement `aria-orientation` correctly for vertical sliders ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841)), and exposes them in the accessibility tree as `horizontal`.
+
+  The `-webkit-appearance: slider-vertical` CSS property can be used to correct this, though it will trigger a console warning in newer Chrome versions:
+  ```css
+  .MySlider-thumb > input {
+    -webkit-appearance: slider-vertical;
+  }
+  ```
+  The `Slider.Thumb` subcomponent automatically sets 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 for Chrome 124 and newer.
+</Callout>
+
 ## RTL
 
 Set the `direction` prop to `'rtl'` to change the slider's direction for right-to-left languages:

packages/mui-base/src/Slider/Thumb/useSliderThumb.ts

@@ -233,6 +233,10 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
 
   const getThumbInputProps: useSliderThumb.ReturnValue['getThumbInputProps'] = React.useCallback(
     (externalProps = {}) => {
+      let cssWritingMode;
+      if (orientation === 'vertical') {
+        cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
+      }
       return mergeReactProps(getInputValidationProps(externalProps), {
         'aria-label': getAriaLabel ? getAriaLabel(index) : ariaLabel,
         'aria-labelledby': ariaLabelledby,
@@ -261,6 +265,7 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
           // So that VoiceOver's focus indicator matches the thumb's dimensions
           width: '100%',
           height: '100%',
+          writingMode: cssWritingMode,
         },
         tabIndex: -1,
         type: 'range',