Search code examples
javascripthtmlsetintervalrangeslider

How do i set the velocity of "setInterval" with range sliders?


I have tried putting a variable that changes when the slider changes but it didn't work. Does anyone have an idea? The code below is some examples of what I'm trying to do: That is: creating a BPM every second the chord changes, by creating a slider that changes the value of the seconds but it just doesn't work and I don't know how I can do it.

//Example of what i wanna do.
var i = 0;
var inter;
var index = 4;

function change() {
      var doc = document.getElementById("First");
      var doc2 = document.getElementById("Next1");
      const ar = ["A","Am","B","Bm","C","Cm","D","Dm","Em","F","Fm","G","Gm"];//Chords
      doc.innerHTML = ar[i];//Showing the first chord
      doc2.innerHTML = ar[i+1];//Showing the next chord
      i = (i + 1) % ar.length;
}
inter = setInterval(change, 4000);// this is what im having problems with.



//Example of what i tried before this poster:
//Did not worked
function changeVelocity(){
velocity = document.getElementById("VelocitySlider").value;
if(velocity = 40){
  inter = setInterval(change, 1.5*1000);
}
}



//What i did in HTML was this. 
//The input code im talking about: 
<input oninput="changeVelocity();"onchange="changeVelocity();"type="range" min="40" step="5"max="180" value="40" class="slider" id="Vel">

Solution

  • PS: thank you @Asad Gulzar & thank you to @Andy. Turns out it was easier than I tough. I just had to reset the first function (setInterval) by doing

    var inter = setInterval(function,1000);
    //reset 
    function changeVelocity(){
      velocity = document.getElementById("VelocitySlider").value;
      if(velocity == 40){// put 2 "==" not just one
        clearInterval(inter); // reset the variable
        inter = setInterval(change, 1.5*1000); //adding an new number
      }```