本文介绍一种兼容桌面端与移动端的垂直滑块实现方案：通过 CSS transform 旋转 range 输入框，并配合 touch-action: none 阻止默认触摸滚动行为，从而在保留完全自定义样式的前提下，确保移动端可拖拽操作。
本文介绍一种兼容桌面端与移动端的垂直滑块实现方案：通过 css `transform` 旋转 range 输入框，并配合 `touch-action: none` 阻止默认触摸滚动行为，从而在保留完全自定义样式的前提下，确保移动端可拖拽操作。
实现垂直滑块时，开发者常面临两难选择：
- 使用 -webkit-appearance: slider-vertical 可原生支持垂直方向与移动端拖拽，但无法移除默认样式（因 slider-vertical 与 appearance: none 互斥）；
- 使用 transform: rotate(90deg) 可自由定制轨道、滑块、颜色等（配合 appearance: none），但在 iOS 和部分 Android 浏览器中，手指拖动会触发页面整体滚动而非滑块响应，导致交互失效。
✅ 破局关键：touch-action: none
该 CSS 属性明确告知浏览器——此元素不参与任何原生触摸行为（如平移、缩放、双指滚动），从而将触摸控制权交还给 JavaScript 或原生 的内部逻辑。添加后，transform 旋转的滑块即可在移动端正常响应拖拽：
<input type="range" min="0" max="100" value="50" class="range-vertical">
.range-vertical {
-webkit-appearance: none;
width: 8px;
height: 200px;
background: transparent;
transform: rotate(90deg);
transform-origin: center;
/* ✅ 核心修复：禁用默认触摸行为 */
touch-action: none;
/* 自定义轨道 */
&::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
}
/* 自定义滑块 */
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
background: #2196f3;
border-radius: 50%;
cursor: pointer;
}
}
⚠️ 注意事项：
- touch-action: none 必须作用于 元素本身（非伪元素），且需确保父容器未覆盖其触摸行为；
- 为兼顾旧版 Safari（
- 若需支持键盘操作（如 Tab + 方向键），请确保 tabindex 正确且无障碍属性（如 aria-orientation="vertical"）已补充；
- 垂直布局时注意 transform-origin 设置，避免旋转后定位偏移（推荐 center 或显式 50% 50%）。
? 总结：无需依赖实验性 slider-vertical，也无需引入 JS 拖拽库——仅用标准 CSS 的 transform + touch-action: none 组合，即可获得高兼容、易定制、真可用的垂直 range 滑块，完美覆盖现代桌面与移动设备。
