JSFiddle - React, Tailwind, and code Playground

HTML

<p>min : <input id="min" type="number" min=0 max=99 step=1 size=2 value=10 /></p>
<p>max : <input id="max" type="number" min=0 max=99 step=1 size=2 value=90 /></p>

<canvas width=400 height=150></canvas>

JavaScript

var $canvas = document.querySelector("canvas");
var cx = $canvas.getContext("2d");
var w = $canvas.width;
var h = $canvas.height;

// préparation du texte dans le canevas
cx.font = "80% sans-serif";
cx.textBaseline = "top";
var textHeight = (function() {
   var $span = document.createElement("span");
   $span.style.visibility = "hidden";
   $span.style.position = "absolute";
   $span.style.top = "0";
   $span.style.left = "0";
   $span.style.font = cx.font;
   $span.textContent = "1234567890";
   document.body.appendChild($span);
   var th = $span.clientHeight;
   document.body.removeChild($span);
   return th;
}());
var h2 = h - textHeight - 3;

// tracé de l'axe et des labels
cx.beginPath();
cx.moveTo(0, h2 + 0.5);
cx.lineTo(w, h2 + 0.5);
for (var i = 0; i < 100; i += 10) {
   var x = Math.round(i * w / 100) + 0.5;
   cx.moveTo(x, h2);
   cx.lineTo(x, h2 + 3);
   cx.fillText(i, x, h2 + 2);
}
cx.stroke();

// gestion des valeurs min et max
var $min = document.getElementById("min");
var $max = document.getElementById("max");
var min = parseInt($min.value);
var max = parseInt($max.value);

function updateMinMax() {
   var a = parseInt($min.value);
   var b = parseInt($max.value);
   min = Math.min(a, b);
   max = Math.max(a, b);
   cx.clearRect(0, 0, w, h2);
}
$min.addEventListener("change", updateMinMax);
$max.addEventListener("change", updateMinMax);

// dessin des points
cx.fillStyle = "rgba(102, 187, 255, 0.75)";
(function animationLoop() {
   for (var y = 0; y < h2; y++) {
      var r = Math.random() * (max - min) + min;
      var x = (r * w / 100);
      cx.fillRect(x, y, 1, 1);
   }

   requestAnimationFrame(animationLoop);
}());