I am trying to dynamically change a span element based on the input value when the event 'input' is triggered.
Below is my HTML code:
<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>Time saved: <span id="time"></span></p>
</div>This is my TypeScript file:
var slider = document.getElementById("myRange") as HTMLInputElement;
var output = document.getElementById("demo");
output.innerHTML = slider.value;
var convertSlider = parseInt(slider.value);
var timeSaved = Math.round(convertSlider * 4* (1 - Math.min(convertSlider, 200) * 40 / 10000)).toString();
var timeSavedOutput = document.getElementById("time");
timeSavedOutput.innerHTML = timeSaved;
slider.oninput = e => {
output.innerHTML = ((<HTMLTextAreaElement>e.target).value);
timeSavedOutput.innerHTML = timeSaved;
};Even though I have successfully displayed the value in my #time span, it does not update when I adjust the slider. How can I capture the event to ensure that the value in my #time span also updates accordingly?