Opus1no2/progress.html

## progress.html
<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <style>
      .body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <input type='range' name='prog' value='5000' min='0' max='10000'>
    <div data-for='prog'></div>
    <script>
      const progVal = document.querySelector('[data-for="prog"]');
      const progInput = document.querySelector('[name="prog"]');
      const debounced = debounce(inProgress, 500, true);

      progVal.innerHTML = progInput.value;

      progInput.addEventListener('change', (e) => {
        progVal.innerHTML = progInput.value;
      });

      progInput.addEventListener('input', debounced);

      function inProgress() {
        progVal.innerHTML = 'updating...';
      }

      function debounce(func, wait, immediate) {
        let timeout;
        return () => {
          const context = this, args = arguments;
          const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
          };
          const callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
        };
      };
    </script>
  </body>
</html>
	<!doctype html>
	<html lang='en'>
	<head>
	<meta charset='utf-8'>
	<style>
	.body {
	margin: 0;
	}
	</style>
	</head>
	<body>
	<input type='range' name='prog' value='5000' min='0' max='10000'>
	<div data-for='prog'></div>
	<script>
	const progVal = document.querySelector('[data-for="prog"]');
	const progInput = document.querySelector('[name="prog"]');
	const debounced = debounce(inProgress, 500, true);

	progVal.innerHTML = progInput.value;

	progInput.addEventListener('change', (e) => {
	progVal.innerHTML = progInput.value;
	});

	progInput.addEventListener('input', debounced);

	function inProgress() {
	progVal.innerHTML = 'updating...';
	}

	function debounce(func, wait, immediate) {
	let timeout;
	return () => {
	const context = this, args = arguments;
	const later = function() {
	timeout = null;
	if (!immediate) func.apply(context, args);
	};
	const callNow = immediate && !timeout;
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	if (callNow) func.apply(context, args);
	};
	};
	</script>
	</body>
	</html>