Loan Calculator

Interactive loan calculator for monthly payments and total interest.

Preview · Loan Calculator

Code

HTML · @primus/ui-core

<div class="card" style="max-width:340px;padding:1.25rem">
  <h3 style="margin:0 0 1rem;font-size:0.975rem">Loan Calculator</h3>
  <div class="vstack">
    <div data-field><label>Loan Amount <input type="range" min="1000" max="500000" value="50000" /></label><span data-hint>$50,000</span></div>
    <div data-field><label>Interest Rate <input type="range" min="1" max="30" value="6" step="0.1" /></label><span data-hint>6.0% APR</span></div>
    <div data-field><label>Term <input type="range" min="12" max="360" value="60" step="12" /></label><span data-hint>60 months (5 years)</span></div>
    <div class="card stat" style="background:color-mix(in srgb,var(--primary) 8%,transparent)">
      <span class="card-label">Monthly Payment</span>
      <span class="card-value">$966.64</span>
    </div>
  </div>
</div>

React

import { LoanCalculator } from 'primus-react-ui';

<LoanCalculator apiUrl="https://api.yourdomain.com" />

Angular

<primus-loan-calculator [apiUrl]="'https://api.yourdomain.com'">
</primus-loan-calculator>

Props

Prop	Type	Default	Description
apiUrl	string	—	API base URL

Props — full reference

Prop	Type	Default	Description
apiUrl	string	—	API base URL
minAmount	number	1000	Minimum loan amount
maxAmount	number	500000	Maximum loan amount
minTermMonths	number	12	Min term in months
maxTermMonths	number	360	Max term in months
onCalculate	(result: LoanResult) => void	—	Fires on calculation

interface LoanResult {
  principal:      number;
  rate:           number;
  termMonths:     number;
  monthlyPayment: number;
  totalInterest:  number;
  totalCost:      number;
}

Version history

See the Changelog for version history and breaking changes.