反转滑块效果

Question

我正在尝试反转 myrange 滑块的值。当POS = 0时，myrange滑块应该在最大并且当 POS = 100 时，myrange 滑块应该至少。当我使用滑块时，它会跳转到高值，例如：10089。（number 是由旋转编码器控制的整数。当我使用编码器时，脚本运行完美，所以我想我在 JS 中做错了什么。）我做错了什么？

//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>
    ```

Answer 1

已将滑块旋转 180 度 CSS。

      .slider {
        -webkit-appearance: none;
        width: 50%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        -ms-transform: rotate(180deg); /* IE 9 */
        transform: rotate(180deg);
      }

反转滑块效果

Inverting slider effect

javascript

html

c++

arduino

fetch