最轻量图片对比滑块用HTML+CSS+JS实现：两张图绝对定位叠放，range控件实时绑定clip-path inset裁切（推荐--p变量写法），监听input事件；需等图片onload后初始化，处理加载失败、宽高比不一致、移动端touch-action及Safari兼容性问题。
用 input[type="range"] 手动实现最轻量的图片对比滑块
不需要任何第三方库，纯 HTML + CSS + JS 就能跑起来。核心是把两张图叠在一起，用一个 input[type="range"] 控制遮罩层的宽度，露出底图部分区域。
常见错误是直接用两个
- 容器设为
position: relative，底图（原图）用position: absolute铺满 - 顶图（对比图）用
position: absolute+clip-path或overflow: hidden+ 子容器控制可见宽度 -
input[type="range"]的value绑定到遮罩宽度，范围建议设为0–100，对应百分比 - 监听
input事件（不是change），保证拖拽过程实时响应
为什么 clip-path 比 overflow: hidden 更可靠
clip-path: inset(0 0 0 X%) 能精准从右侧向左“裁掉”一部分，露出底下图片；而靠 overflow: hidden + 移动子容器的方式，在缩放、高 DPR 屏幕或图片未加载完成时容易错位。
兼容性注意：Chrome/Firefox/Edge 105+ 支持良好，Safari 15.4+ 开始支持 inset()，但旧 Safari（如 iOS 15.2）需降级用 clip-path: polygon() 动态生成坐标。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐写法：
clip-path: inset(0 calc(100% - var(--p, 50)%) 0 0)，配合style="--p: 70;"控制 - 避免用
clip: rect()（已废弃，且不支持百分比） - 若必须兼容 Safari 14 及更早版本，改用
mask-image: linear-gradient(...)，但会增加 CSS 复杂度
图片加载未完成时滑块错位？加 img.onload 守护
滑块位置依赖图片真实尺寸，但 img.width 在未加载完时为 0，导致初始化 clip-path 计算错误，拖动后突然跳变。
- 不要在 DOM 加载完就立即初始化滑块逻辑，等两张图都触发
onload后再绑定 - 给
loading="eager"防止懒加载干扰时序 - 加 fallback：如果某张图加载失败，显示提示并禁用滑块（
input.disabled = true） - 可选增强：监听
img.naturalWidth，避免因 CSS 缩放导致的宽高误判
移动端拖拽卡顿？关掉 touch-action 默认行为
iOS Safari 和部分安卓浏览器默认对 input[type="range"] 做了 touch 优化，但和自定义 clip-path 动画叠加时可能丢帧。
- 给 range 元素加样式：
touch-action: none - 同时确保容器不带
will-change: transform等可能触发额外合成层的属性 - 性能敏感场景下，用
requestAnimationFrame包裹clip-path更新，避免 layout thrashing - 别用
transition: clip-path做缓动——它无法硬件加速，反而更卡
实际最易被忽略的是图片宽高比不一致时的处理：两张图若原始尺寸不同，仅靠 width: 100%; height: auto 会导致裁切区域错位。得统一用 object-fit: cover + 固定容器宽高，再做滑块逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
