根据滑块值更改 div

Question

正在尝试根据滑块的位置触发功能。我尝试了几种不同的方法。我在这里错过了什么？这是我的代码（如下）。 Html

<div id="box">Box</div>
<form oninput="amount.value=rangeInput.value">
        <input type="range" id="rangeInput" name="rangeInput" step="20" value="0" onchange="updateValue()">
        <div align="center" style="font-size:25px;">
            <output name="amount" for="rangeInput">0</output>
        </div>
    </form>

这是CSS



#box{
    position:absolute;
    width:100px;
    height:100px;
    background:#ffffff;}


input[type="range"] {
  -webkit-appearance: none;
  width: 600px;
  height: 25px;
  border: 1px solid;
  background-color: #555555;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border: 1px solid;
  background-color: #FFF;
  z-index:6000;
}

这是javascript

slider.oninput = function() {
  output.innerHTML = this.value;
}

function updateValue() {
  var rangeInput = document.getElementById("myRange").value
  if (rangeInput == 20) {
    $("#box").css({'background':'red'});

  }
  if (rangeInput == 40) {
    $("#box").css({'background':'blue'});

  }
    if (rangeInput == 60) {
    $("#box").css({'background':'pink'});

  }
    if (rangeInput == 80) {
    $("#box").css({'background':'green'});

  }
}

我不知道我做错了什么。

Answer 1

看来基本可以了。我在这里做的唯一重要的事情是将 document.getElementById("myRange").value 更改为 document.getElementById("rangeInput").value.

// slider.oninput = function() {
//  output.innerHTML = this.value;
// }

function updateValue() {
  var rangeInput = document.getElementById("rangeInput").value
  if (rangeInput == 20) {
    $("#box").css({'background':'red'});

  }
  if (rangeInput == 40) {
    $("#box").css({'background':'blue'});

  }
    if (rangeInput == 60) {
    $("#box").css({'background':'pink'});

  }
    if (rangeInput == 80) {
    $("#box").css({'background':'green'});

  }
}

#box{
    position:absolute;
    width:100px;
    height:100px;
    background:#ffffff;}


input[type="range"] {
  -webkit-appearance: none;
  width: 600px;
  height: 25px;
  border: 1px solid;
  background-color: #555555;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border: 1px solid;
  background-color: #FFF;
  z-index:6000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">Box</div>
<form oninput="amount.value=rangeInput.value">
  <input type="range" id="rangeInput" name="rangeInput" step="20" value="0" oninput="updateValue()">
  <div align="center" style="font-size:25px;">
    <output name="amount" for="rangeInput">0</output>
  </div>
</form>

编辑：将 onchange="updateValue()" 更改为 oninput="updateValue()" 使其在移动时更新，而不是在鼠标抬起时更新。

Answer 2

只需删除 slider.oninput 或将其放在代码底部，因为它会覆盖 onchange 事件。

function updateValue() {
  var rangeInput = document.getElementById("myRange").value
  if (rangeInput == 20) {
    $("#box").css({'background':'red'});

  }
  if (rangeInput == 40) {
    $("#box").css({'background':'blue'});

  }
    if (rangeInput == 60) {
    $("#box").css({'background':'pink'});

  }
    if (rangeInput == 80) {
    $("#box").css({'background':'green'});

  }
}

slider.oninput = function() {
  output.innerHTML = this.value;
}

根据滑块值更改 div

change div based on slider value

javascript

if-statement

function

slider