Display
对比滑块
可拖拽分隔线的 before/after 图片对比滑块。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a before/after comparison slider. Use two overlapping panels representing a before and after state, with a vertical draggable divider in the middle. As the divider moves, it reveals more of one panel and less of the other. Add a small handle on the divider. Use CSS clip-path and JavaScript for drag handling. Use Tailwind CSS. The panels can be placeholder color blocks with labels.
中文提示词
创建一个前后对比滑块。使用两个重叠面板表示 before 和 after 状态,中间有一条垂直可拖拽分隔线。分隔线移动时,显示更多一个面板、更少另一个面板。在分隔线上添加小手柄。使用 CSS clip-path 和 JavaScript 处理拖拽。使用 Tailwind CSS。面板可用带标签的彩色占位块。

Overview
用于一眼展示转变、改进或差异的触感对比组件。
Features
- 两个重叠面板
- 垂直可拖拽分隔线
- clip-path 揭示
- 小分隔线手柄
- 鼠标/触摸拖拽支持
- 带标签的占位面板
Usage
适用于产品转变、图片编辑工具、设计前后对比或功能对比。
Customization
修改 prompt 以:
- 添加跟随分隔线的标签
- 改为水平方向
- 分隔线上添加微妙阴影
- 显示百分比指示器