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

Question

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

Answer 1

根据输入值执行某些操作的简单函数可以是这样的：&nbsp; &nbsp; document.getElementById("myRange").addEventListener("change", function (e) {&nbsp; &nbsp; &nbsp; let value = parseInt(this.value);&nbsp; &nbsp; &nbsp; let resultElm = document.getElementById("result");&nbsp; &nbsp; &nbsp; switch (true) {&nbsp; &nbsp; &nbsp; &nbsp; case 0 < value && value <= 20:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultElm.innerHTML = ":|";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 20 < value && value <= 40:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultElm.innerHTML = ":)";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 40 < value && value <= 60:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultElm.innerHTML = ":))";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 60 < value && value <= 80:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultElm.innerHTML = ":D";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 80 < value && value <= 100:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultElm.innerHTML = "^^";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; <input type="range" min="0" max="100" value="0" id="myRange" />&nbsp; &nbsp; <div id="result"></div>你可以在里面做任何你想做的case blocks事情，突出显示一些东西，改变一个图标等等......