COMPONENT 81 · Motion & Interaction

前后对比滑块

Before–After Slider

也叫Image Comparison SliderComparison Reveal图片对比滑杆

拖动分隔把手，连续揭示同一区域的前后两幅图。

Drags a divider to reveal before and after versions of the same scene.

ANATOMY & USAGE

结构与使用建议

组成部分

前图
后图裁切层
可拖动分隔把手

适合使用

两张图严格对齐，局部差异需要直观比较时。

不建议使用

图片构图不同、需要精确并排比较或差异不只靠视觉时。

键盘与无障碍

把手实现 slider 语义和键盘控制；两图有替代说明，并提供并排查看方式。

DESCRIBE IT TO AI

这样告诉编程助手

实现前后对比滑块（Before–After Slider）：拖动分隔把手，连续揭示同一区域的前后两幅图。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo compare">
  <div class="after">之后</div>
  <div class="before">之前</div>
  <label for="reveal">对比位置 <output>50%</output>
  </label>
  <input id="reveal" type="range" min="0" max="100" value="50">
</section>