JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.css">
<div id="slider"></div>
<ul>
  <li><strong>Your Investment</strong> <span id="investment-amount"></span> AED</li>
  <li><strong>Term</strong> <span id="investment-term"></span> Months</li>
  <li><strong>Your Returns</strong> <span id="returns-amount"></span> AED</li>
  <li><strong>Monthly Interest</strong> <span id="monthly-interest-amount"></span> AED</li>
</ul>

SCSS

#slider { margin: 30px; }
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    strong {
      display: inline-block;
      width: 150px;
    }
    span {
      text-align: right;
    }
  }
}

JavaScript

var slider = document.getElementById('slider'),
		term = 12,
    interestPercent = 12;

noUiSlider.create(slider, {
    range: {
        min: 15000,
        max: 1500000
    },
    step: 1000,
    start: 0
});

slider.noUiSlider.on('update', function(values) {
	var amount = parseFloat(values[0]),
  		withInterest = amount * (1 + interestPercent/100);
	document.getElementById('investment-amount').textContent = amount.toLocaleString();
	document.getElementById('investment-term').textContent = term;
	document.getElementById('returns-amount').textContent = withInterest.toLocaleString();
	document.getElementById('monthly-interest-amount').textContent = ((withInterest - amount) / term).toLocaleString();
});