Pricing calculator

A tiny embeddable calculator with $state and $derived.

<script>
  let seats = $state(10);
  let plan = $state(29);
  let monthly = $derived(seats * plan);
  let annual = $derived(monthly * 12 * 0.8);
</script>

<section>
  <h2>Pricing calculator</h2>
  <label>Seats <input type="range" min="1" max="100" bind:value={seats}> <strong>{seats}</strong></label>
  <label>Plan <select bind:value={plan}><option value={29}>Starter — $29</option><option value={79}>Pro — $79</option><option value={199}>Business — $199</option></select></label>
  <div class="total"><span>Annual estimate</span><strong>{annual.toLocaleString()}</strong></div>
</section>

<style>
  section{font:16px system-ui;padding:24px;max-width:420px;border-radius:24px;background:linear-gradient(#fff,#fff8f3);border:1px solid #f1d4c4}
  label{display:grid;gap:8px;margin:16px 0}.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;padding-top:20px;border-top:1px solid #eee}.total strong{font-size:32px}
</style>