原生 input[type="range"] 不支持垂直方向，orient="vertical" 属性已被弃用且无效；垂直滑块需依赖 css 私有属性组合（-webkit-appearance、writing-mode、appearance）或完全自定义实现。
orient="vertical" 是非标准且已被弃用的 HTML 属性
它从未被任何主流浏览器正式支持，Firefox 曾短暂实验性支持 orient="vertical"，但早在 2019 年就移除了。现在写 <input type="range" orient="vertical"> 完全无效，连解析都不会触发垂直行为 —— 浏览器直接忽略该属性。
垂直滑动条只能靠 CSS + 浏览器私有属性实现
目前唯一可行路径是组合使用三套互不兼容的私有声明：
-
-webkit-appearance: slider-vertical：Chrome / Edge / Safari 必须项，缺了就不垂直 -
writing-mode: bt-lr：仅 IE 和旧版 Edge 有效，现代 Chromium/Firefox 不认 -
appearance: none+ 显式width/height：所有浏览器都需要先清除默认外观，再强制设高远大于宽（如width: 8px; height: 150px） - 必须加
padding: 0 5px或类似左右内边距，否则滑块在 Chrome 中会错位或不可拖
移动端垂直 range 的坑比桌面还多
在 iOS Safari 和 Android Chrome 上：
- 即使加了
-webkit-appearance: slider-vertical，触摸响应区域仍极窄，用户常点空或误触 - 需额外加
touch-action: none防止页面滚动干扰，但会导致无法同时上下滑页面 - Firefox for Android 完全不支持垂直模式，会回退为水平滑块，且无降级提示
- 没有键盘焦点支持：
Tab进入后方向键无法控制，aria-orientation="vertical"仅起语义作用，不改变行为
真正稳定的做法是放弃原生 vertical range
如果你需要垂直方向、跨平台一致、可访问、支持键盘操作，别硬刚浏览器私有属性。实际项目中更可靠的方式是：
- 用
<div> 模拟轨道 + <code><button role="slider" aria-orientation="vertical"></button>模拟滑块 - 监听
pointerdown/touchstart+pointermove计算 Y 轴偏移映射到值域 - 手动维护
aria-valuenow、aria-valuemin、aria-valuemax - 对键盘事件显式处理
ArrowUp/ArrowDown/PageUp/PageDown
原生 input[type="range"] 的垂直支持，本质上是“写着玩”的实验性碎片，不是可用功能。强行用，等于把兼容性、可访问性和维护成本全押在浏览器厂商的临时兴趣上。
