JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<input id="pos" type="range" min="0" max="100" step="1" value="0" />

JavaScript

$(function () {
  var
    ctx = $('#canvas')[0].getContext('2d'),
    $pos = $('#pos'),
    draw;

  draw = function() {
    var x = ($pos.val() / 100) * (ctx.canvas.width - 20);

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = 'black';
    ctx.fillRect(x, 0, 20, 20);
  };

  setInterval(draw, 40);
});