Изменить значение события на вводе

Question

У меня есть диапазон, который я хочу изменить в соответствии со значением из входного события oninput

Вот мой html:

  <div class="slidecontainer">
        <input type="range" min="1" max="1000" value="50" class="slider" id="myRange" step="3" class="myRange">
        <p>Value: <span id="demo"></span></p>
        <p>Gain de temps: <span id="time"></span></p>
      </div>

Мой файл машинописи:

 var slider = document.getElementById("myRange") as HTMLInputElement;
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    var convertSlider = parseInt(slider.value); 
    var gainTime = Math.round(convertSlider * 4* (1 - Math.min(convertSlider, 200) * 40 / 10000)).toString();
    var gainTimeOutput = document.getElementById("time");
    gainTimeOutput.innerHTML = gainTime; 

    slider.oninput = e => {
      output.innerHTML = ((<HTMLTextAreaElement>e.target).value);
      gainTimeOutput.innerHTML = gainTime;
    };

С этим решением у меня есть значение в моем диапазоне #time, но оно не меняется при перемещении значения ползунка, как перехватить событие, чтобы также изменить значение мой промежуток #time?

Answer 1

Я не знаю, что вы пытаетесь сделать с этим кодом: output.innerHTML = ((<HTMLTextAreaElement>e.target).value); Но для достижения sh то, что вы описали, скорее должно соответствовать значению ползунка.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var gainTimeOutput = document.getElementById("time");

slider.oninput = e => {
  output.innerHTML = slider.value;
  
  var convertSlider = parseInt(slider.value); 
  var gainTime = Math.round(convertSlider * 4* (1 - Math.min(convertSlider, 200) * 40 / 10000)).toString();
  gainTimeOutput.innerHTML = gainTime; 
};

  <div class="slidecontainer">
    <input type="range" min="1" max="1000" value="50" class="slider myRange" id="myRange" step="3">
    <p>Value: <span id="demo"></span></p>
    <p>Gain de temps: <span id="time"></span></p>
  </div>

Answer 2

Я думаю, что вы должны поместить атрибут onChange в ваш ввод, чтобы он мог изменить свое значение

примерно так:

<input type="range" min="1" max="1000" value="50" onChange="handleInputChange()" class="slider" id="myRange" step="3" class="myRange" />

и в вашем скрипте поместить ваш код в функцию

funtion handleInputChange() {
   console.log("hello")
   // your logic
}