如何设置可正常适配移动端的垂直range input样式？

完全可以同时实现这两个需求，核心思路是通过旋转容器而非直接旋转input元素，配合禁用移动端触摸滚动行为，既解决transform方案的移动端滚动问题，又不影响自定义样式的实现。

具体实现方案 #

1. 容器旋转替代input旋转：将range input包裹在一个容器中，对容器应用transform: rotate()实现垂直视觉效果，input本身保持水平状态。
2. 禁用移动端触摸滚动：给input添加touch-action: none属性，阻止拖动滑块时触发页面滚动事件。
3. 正常自定义样式：无需使用slider-vertical，直接用-webkit-appearance: none;覆盖默认样式，实现完全自定义的轨道和滑块。

代码示例 #

HTML结构

<div class="vertical-range-wrapper">
  <input type="range" class="custom-vertical-range" min="0" max="100" value="50">
</div>

CSS样式

/* 旋转容器实现垂直视觉 */
.vertical-range-wrapper {
  transform: rotate(-90deg);
  /* 调整容器尺寸与位置，避免旋转后布局偏移 */
  width: 200px;
  height: 40px;
  margin: 100px 0;
  overflow: hidden;
}

/* 自定义range基础样式 */
.custom-vertical-range {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 40px;
  background-color: #e0e0e0;
  outline: none;
  /* 关键：阻止移动端触摸滚动行为 */
  touch-action: none;
}

/* 自定义webkit内核轨道样式 */
.custom-vertical-range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background-color: #2196F3;
  border-radius: 4px;
}

/* 自定义webkit内核滑块样式 */
.custom-vertical-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #2196F3;
  border-radius: 50%;
  margin-top: -6px; /* 调整滑块与轨道的垂直居中 */
  cursor: pointer;
}

/* 兼容Firefox的轨道与滑块样式 */
.custom-vertical-range::-moz-range-track {
  width: 100%;
  height: 8px;
  background-color: #2196F3;
  border-radius: 4px;
  border: none;
}

.custom-vertical-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #2196F3;
  border-radius: 50%;
  cursor: pointer;
}

方案说明 #

• 容器旋转后，input的触摸交互区域仍保持水平，配合touch-action: none，移动端拖动滑块时不会误触发页面滚动；
• 未使用slider-vertical，因此可以正常通过-webkit-appearance: none;完全自定义轨道和滑块样式，不受默认垂直样式限制；
• 可根据实际需求调整容器的尺寸、旋转角度（比如rotate(90deg)实现反向垂直）以及自定义样式的颜色、尺寸等参数。

内容的提问来源于stack exchange，提问作者ZorgoZ