JSFiddle - React, Tailwind, and code Playground

by dalvarezmartinez1

HTML

<input type="range" min=0 max=5000 value=0 step=1>

JavaScript

const input = document.querySelector('input[type="range"]');
input.addEventListener('input', onChangeInput);

function onChangeInput(event) {
  state.currentValue = parseInt(event.target.value, 10);
  console.log(state.currentValue);
}


const fpsInterval = 1000 / 60;
const frameSize = 50;

const state = {currentValue: 0, then: Date.now()};

function animate() {
  let animationId = requestAnimationFrame(animate);
  let now = Date.now();
  let elapsed = now - state.then;

  if (elapsed > fpsInterval) {
    state.then = now - (elapsed % fpsInterval);
    state.currentValue += 50;
    input.value = state.currentValue;
  }
  
  if (state.currentValue >= 5000) {
  	cancelAnimationFrame(animationId);
  }
}

animate();