javascript - 根据输入元素范围更改 div-element

Question

我创建了这个简单的输入范围(值从 0 到 100)和一个 div 元素(#boxColor)。我想要实现的是，当我将输入范围 slider 拖动到左侧(低于值 33)时，框的颜色更改为绿色。另外，如果我将输入范围 slider 拖动到右侧(66 以上)，框的颜色应更改为红色。值 34-65 之间的框应保持蓝色。这里有人知道如何实现这一目标吗？

function myFunction() {
var x = document.getElementById("myRange").value;
if (x = "50") {
document.getElementById("text").innerHTML = "new";
}
}

#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}

<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>  
    
<div id="boxColor"></div>

Answer 1

您可以通过监听 slider 元素上的输入事件来更改框元素的样式，如下所示:

const slider = document.getElementById('myRange');
const box = document.getElementById('boxColor');

slider.oninput = ({ target: { value } }) => {
  if (+value < 33) box.style.background = 'green';
  else if (+value > 66) box.style.background = 'red';
  else box.style.background = 'blue';
}

#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}

<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>  
    
<div id="boxColor"></div>