如何制作具有该功能的滑块（html、css、js）

Question

参考。我想制作一个滑块，一旦其值为 X（例如 20），就会突出显示（使其更大，但我知道如何做）一张卡片。滑块上的面没有必要，我需要了解使用 html、css 和 js 的核心功能。

Answer 1

根据输入值执行某些操作的简单函数可以是这样的：

    document.getElementById("myRange").addEventListener("change", function (e) {

      let value = parseInt(this.value);

      let resultElm = document.getElementById("result");

      switch (true) {

        case 0 < value && value <= 20:

          resultElm.innerHTML = ":|";

          break;

        case 20 < value && value <= 40:

          resultElm.innerHTML = ":)";

          break;

        case 40 < value && value <= 60:

          resultElm.innerHTML = ":))";

          break;

        case 60 < value && value <= 80:

          resultElm.innerHTML = ":D";

          break;

        case 80 < value && value <= 100:

          resultElm.innerHTML = "^^";

          break;

      }

    });

    <input type="range" min="0" max="100" value="0" id="myRange" />

    <div id="result"></div>

你可以在里面做任何你想做的case blocks事情，突出显示一些东西，改变一个图标等等......