Usage Slider Calculator
介绍
按用量计费的估算卡片：拖动绿色滑块选择金额，金额标签跟随滑块移动，下方四格实时换算可发邮件、意向线索、可约会议等示意数值，底部黑色按钮。
拆自整页模板 潮引 获客智能体官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Usage Slider Calculator 加进你的项目并换成你的配色。
适用场景
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add usage-slider-calculator
mcp › 使用 8pt MCP 调用 get_component("usage-slider-calculator")
代码
Usage Slider Calculator 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-usc"><section class="cy-pr" id="pricing"><div class="cy-wrap"><h2 class="cy-h2">按用量付费，不用订阅</h2> <div class="cy-pr__card"><div class="cy-pr__top"><span>拖动选择充值金额</span><span class="cy-tag">示意估算</span></div> <div class="cy-sl"><span class="cy-sl__v">¥200</span><input type="range" min="0" max="6" step="1" value="1" aria-label="充值金额"></div> <div class="cy-pr__g"><div class="cy-pr__t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 3.5 10 14"/><path d="M20.5 3.5 14 20.5l-4-6.5-6.5-4Z"/></svg><strong data-o="mail">500</strong><small>可发邮件（封）</small></div> <div class="cy-pr__t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9.5" cy="8" r="3.5"/><path d="M3.5 19.5c.6-3.3 3-5 6-5s5.4 1.7 6 5"/><path d="M18.5 8v6"/><path d="M15.5 11h6"/></svg><strong data-o="lead">约 2–6</strong><small>意向线索</small></div> <div class="cy-pr__t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17"/><path d="M8 3v4"/><path d="M16 3v4"/><path d="m9 15 2 2 4-4"/></svg><strong data-o="meet">约 1</strong><small>可约会议</small></div> <div class="cy-pr__t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M14.8 9.2c-.5-.9-1.5-1.4-2.8-1.4-1.6 0-2.8.8-2.8 2.1 0 2.9 5.8 1.5 5.8 4.3 0 1.3-1.2 2.1-2.9 2.1-1.4 0-2.5-.6-3-1.6"/><path d="M12 6v1.8"/><path d="M12 16.3v1.7"/></svg><strong data-o="cost">—</strong><small>单条线索成本（随回复浮动）</small></div></div> <div class="cy-pr__cta"><a class="cy-btn" href="#hero">领取体验额度<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></div></div></div></section></div>
.x-usc{--bg:#F6F5F3;--ink:#111111;--acc:#0D9467;--chip:#ECEBE9;--card:#FFFFFF;--mut:#8E8D8A;--sub:#5F5E5B;--line:#E7E5E1;--tile:#F4F4F3;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-usc *,.x-usc *::before,.x-usc *::after{box-sizing:border-box;margin:0;padding:0}.x-usc{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-usc a{color:inherit;text-decoration:none}.x-usc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-usc input{font:inherit;color:inherit}.x-usc .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-usc .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-usc .cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;background:#161616;color:#fff;font-size:15px;font-weight:500;transition:transform .2s var(--ease),background .2s}.x-usc .cy-btn:hover{background:#2b2b2b}.x-usc .cy-btn:active{transform:scale(.98)}.x-usc .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-usc .cy-btn:hover svg{transform:translateX(3px)}.x-usc .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-usc .cy-logo__m{width:26px;height:26px}.x-usc .cy-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:11px;font-weight:500}@media (prefers-reduced-motion:reduce){.x-usc *,.x-usc *::before,.x-usc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-usc .cy-m{display:none}}.x-usc .cy-pr{padding:40px 0 100px}.x-usc .cy-pr__card{max-width:680px;margin:44px auto 0;padding:30px 34px 30px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -18px rgba(0,0,0,.16)}.x-usc .cy-pr__top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--mut)}.x-usc .cy-sl{position:relative;height:56px;margin-top:4px}.x-usc .cy-sl__v{position:absolute;top:2px;transform:translateX(-50%);font-size:21px;font-weight:600;white-space:nowrap;transition:left .15s}.x-usc .cy-sl input{position:absolute;left:0;right:0;bottom:4px;width:100%;height:20px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}.x-usc .cy-sl input::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--acc) var(--p,30%),#EFEEEC var(--p,30%))}.x-usc .cy-sl input::-moz-range-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--acc) var(--p,30%),#EFEEEC var(--p,30%))}.x-usc .cy-sl input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:#fff;border:1.5px solid #D6D4D0;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .2s}.x-usc .cy-sl input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1.5px solid #D6D4D0}.x-usc .cy-sl input:active::-webkit-slider-thumb{transform:scale(1.2)}.x-usc .cy-pr__g{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.x-usc .cy-pr__t{position:relative;padding:14px 16px 12px;border-radius:12px;background:var(--tile)}.x-usc .cy-pr__t strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.x-usc .cy-pr__t small{display:block;margin-top:2px;font-size:13px;color:var(--mut)}.x-usc .cy-pr__t svg{position:absolute;right:14px;top:14px;width:18px;height:18px;color:#6E6D6A}.x-usc .cy-pr__cta{display:flex;justify-content:center;margin-top:24px}@media (max-width:760px){.x-usc .cy-pr{padding:20px 0 64px}.x-usc .cy-pr__card{margin-top:28px;padding:22px 18px}.x-usc .cy-pr__t strong{font-size:19px}}.x-usc{background:#F6F5F3 radial-gradient(#DCDAD5 1.3px,transparent 1.5px) 0 0/22px 22px}.x-usc .cy-pr{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}.x-usc .cy-pr__card{max-width:760px}(root) => {
const el = (root.matches && root.matches('.cy-pr')) ? root : root.querySelector('.cy-pr');
if (!el) return;
const amts = [100, 200, 300, 500, 800, 1200, 2000];
const r = el.querySelector('.cy-sl input'), v = el.querySelector('.cy-sl__v');
const o = (k) => el.querySelector('[data-o="' + k + '"]');
const upd = () => {
const i = Number(r.value), a = amts[i], p = (i / (amts.length - 1)) * 100;
r.style.setProperty('--p', p + '%');
v.textContent = '¥' + a;
v.style.left = 'calc(' + p + '% + ' + (8 - p * 0.16) + 'px)';
const mail = Math.round(a * 2.5);
…订阅 Builder 查看完整源码。查看价格