移动端Range Slider无法跟随手指拖动，点击才可移动问题求助

问题根源 #

1. 拖拽失效：滑块元素#slider设置的transform: translate(-50%, -50%)导致触摸交互区域与视觉位置错位，移动端无法正确识别拖拽动作，仅支持点击定位。
2. Chrome移动端滑块消失：自定义滑块thumb的WebKit样式兼容性不足，叠加transform偏移进一步引发渲染异常。

修复方案 #

• 移除#slider的transform: translate(-50%, -50%)：滑块本身为绝对定位且宽高100%，无需额外偏移调整。
• 优化滑块thumb跨浏览器样式：添加移动端适配的光标样式，确保交互可见性。
• 明确设置元素层级：给滑块和按钮添加z-index，避免被图片遮挡交互。

修改后的代码 #

CSS 部分 #

html {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
  padding: 0;
  margin: 0;
}

header {
  background-color: #f1f1f1;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}

#header-logo {
  margin: 5px;
  margin-bottom: 2px;
}

#mobile-menu-button {
  margin-right: 17px;
}

#homepage-main-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vw;
  position: relative;
}

#homepage-main-image-container .comparison-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: 100vw 100%;
}

#homepage-main-image-container #after-image {
  background-image: url("https://itscoolguy.github.io/carwash-website/images/comparisons/comp_1/after.jpg");
}

#homepage-main-image-container #before-image {
  background-image: url("https://itscoolguy.github.io/carwash-website/images/comparisons/comp_1/before.jpg");
  width: 50%;
}

#homepage-main-image-container #slider {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 242, 0.3);
  outline: none;
  margin: 0;
  transition: all 0.2s;
  /* 移除导致触摸错位的transform属性 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; /* 确保滑块在最上层，不被图片遮挡 */
}

#homepage-main-image-container #slider:hover {
  background: rgba(242, 242, 242, 0.1);
}

#homepage-main-image-container #slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 99%;
  background: white;
  cursor: grab;
  cursor: -webkit-grab; /* 适配WebKit移动端 */
}

#homepage-main-image-container #slider::-moz-range-thumb {
  width: 6px;
  height: 99%;
  background: white;
  cursor: grab;
}

#homepage-main-image-container .slider-button {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 11; /* 确保按钮在滑块上层 */
}

#homepage-main-image-container .slider-button:after {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}

#homepage-main-image-container .slider-button:before {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}

button {
  background-color: transparent;
  border: none;
  transition: all 150ms linear;
}

button:hover {
  cursor: pointer;
}

JS 部分（无需修改） #

$("#slider").on("input change", (e) => {
  const sliderPos = e.target.value;
  // 更新前景图片宽度
  $('#before-image').css('width', `${sliderPos}%`)
  // 更新滑块按钮位置
  $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`)
});

HTML 部分（修正笔误并保留原结构） #

<header>
  <div id="header-left">
    <nav></nav>
  </div>
  <div id="header-right">
    <button id="mobile-menu-button">
    <img src="https://itscoolguy.github.io/carwash-website/images/icon-menu.svg" alt="" id="mobile-menu-image">
    </button>
  </div>
</header>
<main>
  <div id="homepage-main-image-container">
    <div id="main-homepage-image">
      <div id="after-image" class="comparison-image"></div>
      <div id="before-image" class="comparison-image"></div>
      <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider" autocomplete="off">
      <div class='slider-button'></div>
      <div id="test"></div>
    </div>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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