图片对比滑块

Before / After Slider

初级通用

两张图叠在一起，中间一条可以拖动的分隔线，左边是「修图前」、右边是「修图后」。修图、装修、界面改版、AI 画质增强这类前后对比，用它展示最直观，用户自己拖着看更有说服力。

你可能会说：「我想展示改版前后的对比，能不能做成中间有条线可以左右拖，两边分别是旧版和新版？」

效果预览拖动分隔线，对比修图前后

正在加载演示…

怎么做3 步做出来

两张图叠放，上面放一个透明的滑块

两张图完全重叠，「后」的那张在上面。拖动直接用原生的 range 输入框，铺满整个区域并设成透明——它自带键盘操作、触屏拖动和读屏支持，比自己写拖拽省事又可靠。

查看代码html

<div class="compare" style="--pos: 50%">
  <img src="/before.jpg" alt="修图前">
  <img class="compare__after" src="/after.jpg" alt="修图后">
  <div class="compare__line" aria-hidden="true"></div>
  <input class="compare__range" type="range" min="0" max="100" value="50"
         aria-label="修图前与修图后的分界位置">
</div>

用 clip-path 裁出「后」图的右半边

上层图片用 clip-path: inset() 从左边裁掉 --pos 那么多，露出下层的「前」图。分隔线跟着 --pos 走。两张图尺寸必须完全一致，否则对不齐。

查看代码css

.compare {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__line {
  position: absolute;
  inset: 0 auto 0 var(--pos);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

滑块变化时更新位置

只需要一行：把滑块的值写回 --pos。用 input 事件而不是 change，拖动过程中实时更新。

查看代码js

document.querySelectorAll('.compare').forEach((box) => {
  const range = box.querySelector('.compare__range');
  range.addEventListener('input', () => {
    box.style.setProperty('--pos', `${range.value}%`);
  });
});

适合放在哪

适合用

修图、调色、AI 画质增强等工具的效果展示。
网站或 App 改版的前后对比。
装修、美容、健身这类服务的案例展示。

不适合用

两张图构图对不齐（角度、尺寸不同）时，别用滑块对比；改成并排展示。
要对比的是一串数据而不是画面时，别用图片滑块；用表格或图表。
用户需要看清所有细节的说明图，别用滑块遮住一半；直接放两张。

让 AI 帮你做复制给 AI Agent 直接用

请做一个图片对比滑块，用在【需要前后对比的地方，如：产品官网的「AI 修图效果」区块】。先阅读这个区块的组件和图片资源，确认前后两张图尺寸一致。要求：两张图绝对定位叠放，「后」图用 clip-path: inset(0 0 0 var(--pos)) 裁切；用一个铺满区域、透明的原生 range 输入框控制 --pos（支持鼠标、触屏和键盘方向键），并提供 aria-label；分隔线和中间的把手跟随位置；两侧标出「前」「后」文字；图片按需加载。不新增依赖，不改无关代码。最后说明怎样在手机上和用键盘分别验证拖动。

用到的知识

图片滑块定位无障碍