How to change the number on the slider in real time through javascript or CSS?-CodePudding

I would like to ask about the function that I made a slider that can display the value!

But I want to be able to swipe, and the numbers can change instantly, instead of stopping to display the numbers, how should this be rewritten?

I really need everyone's help, thank you in advance.

var slider = document.querySelector('#slider');
var result = document.querySelector('#result');
slider.addEventListener('change', function(event) {
  var sliderValue = event.target.value;
  var maxValue = 2000;
  var coef = 18;
  var calc;
  calc = maxValue - (sliderValue * coef);
  result.value = calc;
});

<input id="slider" type="range" name="points" min="0" max="100" value=0>
<input id="result" type="text" name="result">

CodePudding user response：

Change your event listener from change to input.

var slider = document.querySelector('#slider');
var result = document.querySelector('#result');
slider.addEventListener('input', function(event) { //changed to input here
  var sliderValue = event.target.value;
  var maxValue = 2000;
  var coef = 18;
  var calc;
  calc = maxValue - (sliderValue * coef);
  result.value = calc;
});

<input id="slider" type="range" name="points" min="0" max="100" value=0>
<input id="result" type="text" name="result">