Loan Payment Slider Contact Block for React

With the standard formula for a fixed-rate loan: the amount times the monthly rate, divided by one minus the monthly rate plus one raised to the power of minus the number of months. The rate is one constant at the top of the file, APR (9.9% a year, a made-up figure), and every other number in the panel follows from the payment: the total repaid is the payment times the months, and the interest is what is left after the amount. They are example figures only; the panel says so, and nothing in it is an offer of credit or advice.

It moves in steps of $500 with the arrow keys, and Page Up and Page Down jump further. Its thumb is named "Loan amount" and a screen reader hears the value as dollars ("$12,000"). The tick marks under the track are decoration (they are hidden from assistive technology); the amount in large type is the visible value. When you stop moving, or choose a term, one hidden status line says the amount, the term and the payment in a sentence, so nothing is announced while you drag.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a name, an email address with an @ and a domain, an income above zero and the credit-check box. Each problem appears under its field with an icon, the control is marked invalid and described by the message, and focus moves to the first one. Leaving a filled field checks it, and editing a field that shows an error re-checks it as you type.

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the amount, the term, the income, the name, the email and the consent. The confirmation repeats the amount, the term and the example payment, and says a loan officer will write to the address given; it promises nothing else.

Once you type your yearly income the panel shows the payment as a share of your monthly income, and says so when it passes 40%. The limit is HEAVY at the top of the file. It is a prompt to try another amount or term, not a rule: the form still sends.

Below lg the cells stack: the amount and the term, the payment panel, then your details and the button, each divided by a hairline. The term tiles stay four across (the number over "months") down to 320 pixels, name and email go one per row, and the button goes full width. The panel's details line keeps its height as the income comes in, so nothing below it moves.