反转滑块效果

Posted 2023-02-19

【中文标题】反转滑块效果

【英文标题】：Inverting slider effect

【发布时间】：2022-01-15 18:34:28

【问题描述】：

我正在尝试反转 myrange 滑块的值。当 POS = 0 时，myrange 滑块应处于最大值，当 POS = 100，myrange 滑块应至少为最小值。当我使用滑块时，它会跳到高值，例如：10089。（number 是一个由旋转编码器控制的 int。当我使用编码器时，脚本可以完美运行，所以我想我在 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>
    ```

【参考方案1】：

使用 CSS 将滑块旋转 180 度。

      .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);