垂直滑块需用transform: rotate(-90deg)作用于input本身并设transform-origin: center，配合appearance: none重置样式，修正min/max或js映射值方向，且须用pointer-events: none+伪元素/容器接管点击以解决坐标系错位。
垂直滑块用 input type="range" 就能实现，但默认是横的
浏览器原生 input[type="range"] 默认水平布局，想垂直必须靠 CSS 强制旋转。别指望加个属性就自动竖起来——HTML 标准里没有 orientation 这种东西。
关键不是“怎么画个滑块”，而是“怎么让浏览器把水平控件视觉翻转，同时保持拖动逻辑正常”。常见错误是只转容器不调指针，结果滑块能拖、但值乱跳，或者点击轨道没反应。
- 必须对
input本身应用transform: rotate(-90deg)，不能只转外层 div - 要配
transform-origin: center，否则旋转后控件偏出视口 - 记得设
width和height互换：原来横向靠width控长度，垂直时得靠height
input[type="range"] 垂直后，点击轨道失效？检查 pointer-events
旋转后，浏览器仍按原始坐标系处理点击事件。你点的是视觉上的“上半段”，实际触发的是旋转前的“右半段”，导致位置映射错乱。这不是 bug，是 CSS transform 不改变逻辑坐标系的固有行为。
解决方法不是写 JS 算坐标，而是用 pointer-events: none + 伪元素接管点击区域：
- 给
input设pointer-events: none - 用
::-webkit-slider-runnable-track（WebKit）或::track（Firefox）等伪元素撑开可点击区 - 更稳的做法：套一层
div作为点击容器，监听click后手动算value并赋给input.value
移动端触摸体验差？垂直滑块必须加 -webkit-appearance: none
iOS Safari 和部分安卓浏览器会强制渲染原生样式，无视你的旋转和尺寸设置，尤其在竖屏下容易把滑块压扁或截断。不重置外观，CSS 白写。
- 所有浏览器都要加
-webkit-appearance: none（WebKit）和appearance: none（标准） - Chrome/Edge 需单独重写
::-webkit-slider-thumb的height/width，否则拇指太小难点 - Android WebView 对
transform-origin支持不稳定，建议固定用50% 50%而非center
值范围与视觉方向反了？用 min/max 配合 CSS 反向控制
垂直滑块往上拖，数值却变小——因为旋转 -90° 后，浏览器仍按“左→右”递增逻辑映射。你看到的“顶部=最大值”，其实是逻辑上的“最右端”。得主动翻转语义。
- 设
min="100"、max="0"，再配合step="-1"，让值随拖动向上而增大 - 或者保持
min="0"/max="100"，JS 读取后做100 - input.value映射 - 别依赖 CSS
scaleY(-1)，它会把拇指镜像翻转，触控反馈异常
真正麻烦的不是写几行 CSS，而是不同浏览器对 transform + range 的组合渲染差异。iOS 上 thumb 可能卡在边缘，Android 某些版本拖动延迟明显——这些没法靠一套代码通吃，得留好 JS fallback 接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
