JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width=1000 height=100></canvas>
<br />
<input type="range" min="1" max="1000" value="500" id="myRange" style="width: 500px">
<br />
<span id="alpha" style="color: red"></span>,&nbsp;
<span id="beta" style="color: blue"></span>

JavaScript

var scale=50;

function calcBeta(alphaValue) {
	return alphaValue/(alphaValue-1);
}

var alpha = 1.0;
var beta = calcBeta(alpha);

var slider = document.getElementById("myRange");
var outputAlpha = document.getElementById("alpha");
var outputBeta = document.getElementById("beta");
var c=document.getElementById('canvas1').getContext('2d');

function setIntervals() {
	alpha = 1 + slider.value / 500;
	beta = calcBeta(alpha);
  outputAlpha.innerHTML = "alpha: " + alpha;
  outputBeta.innerHTML = "beta: " + beta;
}

function drawGraph() {

  c.clearRect (0,0,1000,100); // Background rectangle

	// draw minute markers
	c.strokeStyle="black";
  for (var i = 0; i < 1000; i+=scale) {
    c.beginPath();
    c.moveTo(i,0);
    c.lineTo(i,100);
    c.stroke();
  }

	// alpha flashes in red
  c.fillStyle = "red";
  for (var a = 0; a < 1000; a += alpha * scale) {
    c.beginPath();
    c.arc(a, 40, 3, 0, 2 * Math.PI);
    c.fill();
  }

	// beta flashes in blue
  c.fillStyle = "blue";
  for (var b = 0; b < 1000; b += beta * scale) {
    c.beginPath();
    c.arc(b, 60, 3, 0, 2 * Math.PI);
    c.fill();
  }
}

// Update the current values (each time you drag the slider handle)
slider.oninput = function() {
  setIntervals();
	drawGraph();
}

setIntervals();
drawGraph();