Usage Slider Calculator
Overview
A usage-based pricing estimator card: drag the green slider to choose an amount, with the amount label following the thumb, while four tiles below convert it live into sample figures for sendable emails, qualified leads and bookable meetings. A black button sits at the bottom.
Taken from the page template Chaoyin Lead-Gen Agent Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Usage Slider Calculator to your project in your colors.
Where to use it
SaaS pricing pages, upgrade dialogs, plan comparisons and monthly / yearly toggles.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add usage-slider-calculator
mcp › Use 8pt MCP to call get_component("usage-slider-calculator")
Code
Source for Usage Slider Calculator. Motion uses only transform and opacity and respects the Reduce motion setting.
<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);
…Subscribe to Builder to see the full source.See pricing