Quickstart: Build a live repayment illustration

Debounce the quote call

let t;
slider.addEventListener('input', () => {
  clearTimeout(t);
  t = setTimeout(async () => {
    const res = await fetch(`${BASE}/quote`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: Number(slider.value), term_months: 6 }),
    });
    const q = await res.json();
    output.textContent = `\u00a3${q.repayment}/month`;
  }, 300);
});

A 300ms debounce means one call per pause, not one per pixel — smooth for the user and easy on the limit.

Prefer client-side maths where you can

If you fetch pricing config once, you can compute the illustration entirely in the browser and skip the per-drag call altogether. Reserve the quote endpoint for the final confirmed figure.