本文介绍一种兼容桌面端与移动端的垂直 range 输入框实现方案：通过 CSS transform 旋转滑块，并配合 touch-action: none 阻止触摸滚动干扰，从而在保留完全自定义样式能力的同时，确保移动端拖拽功能正常。
本文介绍一种兼容桌面端与移动端的垂直 range 输入框实现方案：通过 css `transform` 旋转滑块，并配合 `touch-action: none` 阻止触摸滚动干扰，从而在保留完全自定义样式能力的同时，确保移动端拖拽功能正常。
要实现一个真正可用、可定制、且跨平台兼容的垂直 range 滑块，关键在于解决移动端的“触摸冲突”问题——当使用 transform: rotate(90deg) 实现垂直布局时，浏览器默认会将纵向滑动解释为页面滚动，导致滑块拖拽失灵。
✅ 正确解法：transform + touch-action: none
-webkit-appearance: slider-vertical 虽原生支持垂直方向，但与 -webkit-appearance: none（自定义样式的前提）互斥；而纯 transform 方案在桌面端表现良好，却在移动端失效。突破点在于：不修改滑块方向逻辑，而是接管触摸行为。
只需为 元素添加：
.vertical-range {
/* 垂直旋转：顺时针90度 */
transform: rotate(90deg);
transform-origin: center;
/* 关键！禁用默认触摸滚动，启用精确拖拽 */
touch-action: none;
/* 可选：确保容器尺寸合理，避免旋转后溢出 */
width: 200px;
height: 30px;
margin: 0 auto;
}
? touch-action: none 明确告知浏览器：“此元素不触发任何默认触摸行为（如平移、缩放）”，从而将触摸事件完全交由 input 的原生拖拽逻辑处理。该属性已被所有现代移动浏览器（Chrome、Safari、Firefox for Android/iOS）广泛支持。
? 完整可运行示例
<style>
.vertical-slider-container {
display: inline-block;
width: 40px;
height: 200px;
margin: 20px;
transform: rotate(-90deg); /* 逆时针90°，使滑块从上到下增长 */
transform-origin: center;
}
.vertical-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #e0e0e0;
border-radius: 3px;
outline: none;
touch-action: none; /* ✅ 核心修复 */
}
.vertical-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #2196F3;
border-radius: 50%;
cursor: pointer;
}
.vertical-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #2196F3;
border: none;
border-radius: 50%;
cursor: pointer;
}
</style><div class="vertical-slider-container">
<input type="range" min="0" max="100" value="50" class="vertical-slider">
</div>
⚠️ 注意事项与最佳实践
- transform-origin 很重要：若未设置，旋转中心可能偏移，导致滑块位置错乱或交互区域异常；
- 容器包裹更可控：推荐将 transform 应用于外层容器（如 .vertical-slider-container），而非直接作用于 input，便于布局与响应式控制；
- iOS Safari 兼容性：touch-action: none 在 iOS 13.4+ 已稳定支持；旧版本可降级为 touch-action: pan-y（仅允许垂直滚动，但需测试是否影响拖拽精度）；
- 无障碍支持：保持 aria-label 或 label[for]，确保屏幕阅读器能正确识别控件用途；
- 不要移除 outline 后忽略焦点样式：为可访问性，建议添加 :focus-visible 自定义焦点环。
✅ 总结
你完全可以兼顾「垂直布局」「深度自定义样式」和「移动端拖拽可用性」——无需妥协于 -webkit-appearance: slider-vertical 的样式限制，也无需放弃 transform 的灵活性。touch-action: none 是打通移动端最后一公里的关键 CSS 属性。它轻量、标准、高效，是现代 Web 表单交互中值得掌握的实用技巧。
