[slider] Add missing webkit-appearance: slider-vertical CSS

[oliviertassinari]

Steps to reproduce

Steps:

1. Open https://master--base-ui.netlify.app/components/react-slider/#vertical or open https://mui.com/material-ui/react-slider/#vertical-sliders

Current behavior

Expected behavior

Context

https://issues.chromium.org/issues/40739626 was fixed 3 years ago after Sebastian reported it, so we should now be able to remove the content in https://mui.com/material-ui/react-slider/#vertical-sliders and apply the style. This style is needed because aria-orientation is no correctly interpreted per https://issues.chromium.org/issues/40736841.

I noticed this in https://github.com/mui/base-ui/pull/636, it was weird.

Closing this issue also means getting https://mui.com/material-ui/react-slider/#vertical-sliders fixed. I opened this issue in Base UI to be at the root, for the Slider component owner.

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: -

[mj12albert]

As of 2023 Chromium plans to deprecate webkit-appearance: slider-vertical 😅 https://issues.chromium.org/issues/40261389

The recommendation is to use writing-mode instead, though for <input type="range"> it doesn't have full browser suppport

For older browsers that we need to support, there are still (non-standard) properties to fall back to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls#creating_vertical_range_sliders_in_older_browsers

[oliviertassinari]

@mj12albert oh, I didn't know interesting. I guess it's https://github.com/mdn/content/pull/32142.