# Request Feature for Loan Calculator

**URL:** <https://community.elfsight.com/t/request-feature-for-loan-calculator/95154>\
**Category:** General Questions\
**Tags:** calculator\
**Created:** [January 17, 2025, 10:52am UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154 "2025-01-17T10:52:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dave\_Clarke](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dave_clarke/32/46220_2.png) [@Dave\_Clarke](https://community.elfsight.com/u/Dave_Clarke)\
**Post date:** [January 17, 2025, 10:52am UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/1 "2025-01-17T10:52:37Z")

</div>

Share your use case and provide as many details to support your idea as possible. Thank you! 😊

I’ve created a Loan Calculator for a credit union here ([Loan Calculator – Mulcair Credit Union](https://mulcaircudev.wpenginepowered.com/loan-calculator/)). Is it possible to restrict the min/max values of the loan amount and loan term sliders depending on the loan type value selected from the dropdown please?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 17, 2025, 5:43pm UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/3 "2025-01-17T17:43:07Z")

</div>

Hey there, @Dave_Clarke 👋

I see that you have 3 Loan types. You can create 3 different Loan Amount and Loan Term sliders with different min/max values and display them based on the chosen Loan Type.

For example:

- Show Loan Amount/Term 1 if Loan Type is Car Loan Over 8K - 7.5% (7.78% APR)

- Show Loan Amount/Term 2 if Loan Type is Agri Loan - 6.55% (APR 6.75%)

- Show Loan Amount/Term 3 if Loan Type is Standard Loan - 11.95% (APR 12.67%)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/a/cae47343c5f8732adbee299f663c8d696bb8213d.png)

  

Please try it out and let me know how it worked 🙂

---

<div class="post-metadata">

**Author:** ![Dave\_Clarke](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dave_clarke/32/46220_2.png) [@Dave\_Clarke](https://community.elfsight.com/u/Dave_Clarke)\
**Post date:** [January 17, 2025, 6:18pm UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/4 "2025-01-17T18:18:55Z")

</div>

Thanks Max. Really appreciate your response.

Ideally I’d like to create something along the lines of this calculator ([https://kilrushcreditunion.ie/](https://kilrushcreditunion.ie/)) where the repayments section uses tabs to display each of the frequency payments. Would something like this be possible with custom code or even to pay for some custom development from you guys?

Thanks for any help.

Dave…

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 17, 2025, 6:23pm UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/5 "2025-01-17T18:23:37Z")

</div>

I am not sure if it’s feasible, but I’ll discuss it with the devs and update you on Monday 🙂

---

<div class="post-metadata">

**Author:** ![Dave\_Clarke](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dave_clarke/32/46220_2.png) [@Dave\_Clarke](https://community.elfsight.com/u/Dave_Clarke)\
**Post date:** [January 17, 2025, 6:30pm UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/6 "2025-01-17T18:30:56Z")

</div>

Thanks Max. Have a nice weekend.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 17, 2025, 6:31pm UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/7 "2025-01-17T18:31:46Z")

</div>

Have a nice weekend too 😉

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 20, 2025, 12:37pm UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/8 "2025-01-20T12:37:15Z")

</div>

Hi @Dave_Clarke 👋

Our devs came up with a custom solution for you:

```auto
const TARGET_FIELD_NAME = 'Repayment Frequency';

function listener(selector, callback) {
  const firstTarget = document.querySelector(selector);
  if (firstTarget) {
    return callback(firstTarget);
  }

  const observer = new MutationObserver((_, observer) => {
    const targetNode = document.querySelector(selector);
    if (targetNode) {
      observer.disconnect();
      callback(targetNode);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

function normalizedString(str) {
  return str.trim().toLowerCase();
}

function installStyles() {
  const style = document.createElement('style');
  style.innerHTML = `
		[class*='FormFieldLayout__Container-sc'].payment {
			margin: 0;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice__OptionsContainer-sc'] {
			display: flex;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__Container-sc'] {
			display: none;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__ItemLabel-sc'] {
			color: #fff;
			flex: 1 1 auto;
			text-align: center;
			padding: 4px 8px;
			border-radius: 4px;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__Label-sc'] {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__ItemLabel-sc'] {
			margin: 0 !important;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__Input-sc']:checked
			~ [class*='choice-option__ItemLabel-sc'] {
			background-color: #fff;
			color: rgb(5, 105, 155);
			font-weight: 600;
		}
	`;
  document.head.appendChild(style);
}

listener('[class*="form__Container-sc"]', (form) => {
  const targetLabelBlock = Array.from(
    form.querySelectorAll(
      '[class*="FormFieldLayout__Container-sc"] [class*="FormFieldLayout__Label-sc"]'
    )
  ).find(
    (node) =>
      normalizedString(node.textContent) === normalizedString(TARGET_FIELD_NAME)
  );

  if (!targetLabelBlock) {
    return;
  }

  targetLabelBlock.style.display = 'none';

  const targetField = targetLabelBlock.parentNode;
  targetField.classList.add('payment');
  const resultContainer = form.parentNode.querySelector(
    '[class*="results__Container-sc"]'
  );
  if (!resultContainer) {
    return;
  }

  installStyles();
  resultContainer.prepend(targetField);
});

```

  

Please add this code to the Custom JS section on the Settings tab of your widget’s settings and let me know how it worked 🙂

> **Note:** It’s important to not change the name of the field “Repayment Frequency”

---

<div class="post-metadata">

**Author:** ![Dave\_Clarke](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dave_clarke/32/46220_2.png) [@Dave\_Clarke](https://community.elfsight.com/u/Dave_Clarke)\
**Post date:** [January 20, 2025, 2:01pm UTC](https://community.elfsight.com/t/request-feature-for-loan-calculator/95154/9 "2025-01-20T14:01:29Z")

</div>

Brilliant Max. Thanks for that. I’ll try that out now and play around with it.