JSFiddle - React, Tailwind, and code Playground

HTML

<div class='cont'>
  <canvas></canvas>
  <input type='range' min='0' max='15' step='.000000000001' value='.5' />
  <p><span>slower</span>SPEED<span>faster</span></p>
</div>

CSS

body {
  background-color: whitesmoke;
}

.cont {
  width: 400px;
  height: 150px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%) translateY(-50%);
}

input {
  margin-top: 32px;
  width: 200px;
}

input::-webkit-slider-runnable-track {
  height: 2px;
  background-color: black;
}

input::-webkit-slider-thumb {
  position: relative;
  top: -10px;
  cursor: pointer;
}

p {
  margin-top: 20px;
  font-weight: bold;
  letter-spacing: 2.25px
}

p span {
  margin: 0 64px;
  font-weight: normal;
  letter-spacing: 0;
}

JavaScript

var canvas = document.querySelector("canvas");
var canvWidth = canvas.width;
var canvHeight = canvas.height;
var canvCentX = canvWidth / 2;
var canvCentY = canvHeight / 2;
var ctx = canvas.getContext("2d");
ctx.lineCap = "round";
ctx.lineWidth = 8;

/*
TAU may be a value to consider here...

Circle like a clock:

12oClock = 4.71
3oClock = 0 (or 6.28 and so on...)
6oClock = 1.57
9oClock = 3.14

Visually:

         4.71

3.14      +      0 (or 6.28 and so on...)

         1.57
*/

var input = document.querySelector("input")

var start = 4.71;
var end = 7.85;
var speed = input.value;

input.addEventListener("input", function() {
  speed = this.value;
});

function drawArc(centX, centY, radius, start, end, color) {
  ctx.clearRect(0, 0, canvWidth, canvHeight);
  ctx.beginPath();
  ctx.arc(centX, centY, radius, start, end);
  ctx.strokeStyle = color;
  ctx.stroke();
}

function spin() {
  ctx.clearRect(0, 0, canvWidth, canvHeight);
  start += .0785 * speed;
  end += .0785 * speed;
  ctx.beginPath();
  ctx.arc(canvCentX, canvCentY, 64, start, end);
  ctx.strokeStyle = "indianred";
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(canvCentX, canvCentY, 48, start + .785, end + .785);
  ctx.strokeStyle = "limegreen";
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(canvCentX, canvCentY, 32, start + 1.57, end + 1.57);
  ctx.strokeStyle = "cornflowerblue";
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(canvCentX, canvCentY, 16, start + 2.355, end + 2.355);
  ctx.strokeStyle = "gold";
  ctx.stroke();
  /*
  drawArc(canvCentX, canvCentY, 64, start, end, "indianred");
  drawArc(canvCentX, canvCentY, 48, start + .785, end + .785, "limegreen");
  drawArc(canvCentX, canvCentY, 32, start + 1.57, end + 1.57, "cornflowerblue");
  drawArc(canvCentX, canvCentY, 16, start + 2.355, end + 2.355, "gold");
  */
  requestAnimationFrame(spin);
}
spin();