JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<input type="range" id="range" name="range" min="1" max="10" value="1" oninput="debouncedSlide()">
<p>Wert <b><span id="wert"></span></b></p>
<br><br>
<input id="output">
</html>


<script>

var debouncedSlide = debounce(slide, 100);

// explanation: https://css-tricks.com/debouncing-throttling-explained-examples/
// example: https://stackoverflow.com/a/24004942/2710739
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this;
    var args = arguments;
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    }, wait);
    if (callNow) func.apply(context, args);
  }
}

function slide() {
  var slider=document.getElementById('range');
  var output=document.getElementById('wert');
 output.innerHTML=slider.value;
 
//  $("#output").val(slider.value);
$.ajax({
  method: "POST",
  url: "https://httpbin.org/post?wert="+slider.value
})
  .done(function( msg ) {
  console.log(msg)
    $("#output").val(msg.args.wert);
  });  
  
}
</script>