Calculator (nouislider)

by George Y

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.2.0/wNumb.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!doctype html>
<html>

  <head>
    <title>Our Funky HTML Page</title>
    <meta name="description" content="Our first page">
    <meta name="keywords" content="html tutorial template">
  </head>

  <body>
    <div class="row">
      <div class="container">
        <div class="col-10 mt-5 m-auto">
          <div id="sliderWP"></div>
        </div>
        <div class="col-10 mt-5 m-auto">
          <input title="Formatted number" id="input-format">
        </div>
      </div>
    </div>
  </body>

</html>

CSS

#sliderWP {
  width: 80%;
}

.noUi-connects {
   background-image: linear-gradient(to right, #a2ea4c 14%, #fff 14%);
 /*    background-image: linear-gradient(to right, #a2ea4c 86px, #fff 86px); */
}

JavaScript

var wpSlider = document.getElementById('sliderWP');
   var sliderFormat = document.getElementById('input-format');
	const maxAmmount = 2000;
	const minAmount = 20;

	const moneyFormat = wNumb({mark: ',', decimals: 2, thousand: '.', prefix: '€'});

	noUiSlider.create(wpSlider, {
		start: [300],
		step: 10,
		handleAttributes: [
			{ 'aria-label': 'drag-handle'},
		],
		range: {
		'min': minAmount,
		'max': maxAmmount
		},
		pips: {
      mode: 'values',
      values: [
      20, 300, 2000
      ],
      density: 100,
      stepped: true,
      format: {
      to: function (value) {
      return '€' + value;
      },
      from: function (value) {
      return value;
      }
      }
		},
		format: moneyFormat
	});
  
  var inputFormat = document.getElementById('input-format');

wpSlider.noUiSlider.on('update', function (values, handle) {
    inputFormat.value = values[handle];
});

inputFormat.addEventListener('change', function () {
    wpSlider.noUiSlider.set(this.value);
});