I'm trying to invert the value of the myrange slider. When POS = 0, myrange slider should be at max and when POS = 100, myrange slider should be at minimum. When I use the slider it jumps to high values like: 10089. (number is an int controlled by a rotary encoder. When I use the encoder, the script works flawless, so I suppose I did something wrong in JS.) What did I do wrong?

//Server handling
void mainserver(){
  String POS = server.arg("VOLM");
  number = 100 - POS.toInt();
  delay(15);
  
  displayrendering();
  server.send(200, "text/plane","");
}

void returnpos() {
  String s = String(number, DEC);
  server.send(200, "text/plain", s); //Send web page
}

<div class="slidecontainer">
      <input type="range" min="-100" max="0" value="0" class="slider" id="myrange" onchange="send()">
      <p>Value : <span id="demo">0</span></p>
    </div>

    <script>
      function send() {
        fetch('/setPOS?' + new URLSearchParams({
            VOLM: 100 - document.querySelector("#myrange").value,
        }))
        document.querySelector("#demo").innerText = document.querySelector("#myrange").value;
      }

      const interval = setInterval(function() {
        fetch('/getPOS').then(function(response) {
          return response.text().then(function(text) {
            document.querySelector("#demo").innerHTML = text;
            document.querySelector("#myrange").value = text;
          });
        });
      }, 100);
      
    </script>
    ```