PRICING
用量滑块定价Usage Slider Pricing
拖滑块选用量，价格实时联动——把"算钱"变成一个好玩的小游戏。
效果预览
适合用在哪
按量计费产品（API、短信、存储）、席位制定价、云服务。
容易踩的坑
- 自定义滑块不支持方向键和 Home/End，键盘用户无法调整用量。
- 每次拖动都同步改 URL 参数，history 堆积上百条，后退键失灵。
- 滑块 thumb 小于 24px，移动端手指拖动时总是误触到页面滚动。
设计提示词 · Prompt
用量滑块定价（Usage Slider Pricing）：一张白卡——上方"团队成员 × 8"滑块（气泡显示当前值）→ 大号价格实时重算（"¥544/月"）→ 下方"合每人 ¥68 · 年付省 20%"。价格变化时数字滚动动画 + 卡片轻微 scale 弹跳。滑块刻度点标注关键档位（"团队 10 人起享 9 折"），拖过阈值时弹出提示。计算逻辑透明化（显示每人单价），用户才会信任这个数字。自动保存滑块位置到 URL 参数，方便销售分享报价链接。
Usage Slider Pricing: a white card — at the top a "Team members × 8" slider (a bubble shows the current value) → a large price recalculated in real time ("¥544/mo") → below, "¥68 per member · save 20% yearly". When the price changes, the numbers roll + the card does a slight scale bounce. Tick marks on the slider label key tiers ("10% off from 10 members"), with a hint popping up when dragging past a threshold. Make the calculation transparent (show the per-member price) so users trust the number. Automatically save the slider position to URL parameters so sales can share quote links.
常见搭配
同一页面里经常和「用量滑块定价」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-usageslider">
<div class="d-usageslider__top"><span>团队成员 × 8</span><b>¥544/月</b></div>
<div class="d-range" style="padding-top:2px">
<div class="d-range__track" style="background:linear-gradient(90deg,var(--i-br) 0 47%,var(--i-bg3) 47%)"><span class="d-range__thumb" style="left:47%"></span></div>
</div>
<span class="d-usageslider__note">合每人 ¥68 · 年付再省 20%</span>
</div>