Question

我创建了这个简单的输入范围（值从0到100）和一个div-element（#boxColor）。我想要实现的是，当我将输入范围滑块拖动到左侧（值33以下）时，框将颜色更改为绿色。另外，如果将输入范围滑块向右拖动（位于66上方），则该框的颜色应变为红色。在值34-65之间，方框应保持蓝色。这里有人知道如何实现吗？

#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>

+--------------+---------------+--------------------+
|Occurence_Date|Duplicate_Count|             Message|
+--------------+---------------+--------------------+
|     13/4/2020|              0|No Duplicate reco...|
+--------------+---------------+--------------------+

Final_df2: Unit = ()

Answer 1

您可以通过监听滑块元素上的input-event来更改框元素的样式，如下所示：

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>

Answer 2

您可以使用事件处理程序来调用根据滑块的当前值执行颜色更改的函数。参见下面的示例：

function handleChange() {

  var x = document.getElementById('myRange').value;
  let color;
  if (x <= 33) {
    color = 'green';
  } else if (x >= 66) {
    color = 'red';
  } else {
    color = 'blue';
  }
  document.getElementById('boxColor').style.backgroundColor = color;
}

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

<div class="slidecontainer">
  <label for="myRange">Custom range slider:</label>
  <input 
    type="range" 
    min="1" 
    max="100" 
    value="50" 
    class="slider" 
    id="myRange" 
    onchange="handleChange()" 
  />
</div>

<div id="boxColor"></div>

Answer 3

您遇到了一些问题，我无法全部解释，但是缺少一个值，而且登录innerHTML不会更改您必须使用样式属性的元素背景。

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

const slider = document.getElementById('myRange');
slider.addEventListener('input', myFunction);
var box = document.querySelector('#box');

function myFunction() {
let x = this.value;

console.log(x);

box.innerHTML = x;
if(x < 33){
box.style.backgroundColor = 'green';
}
else if(x > 65){
box.style.backgroundColor = 'red';
}
else{
box.style.backgroundColor = 'blue';
 }
}


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

查看这个小提琴：https://jsfiddle.net/dsgqtwko/1/

Answer 4

以上所有答案都很好。但是我对其进行了一些改进，以便您可以根据值的变化更自由地设置框的样式。

function handleChange(event) {
  const { value } = event.target;
  const box = document.querySelector('.boxColor');
  
  if(value <= 33) {
    box.classList.add('boxColor--green');
  }else {
    box.classList.remove('boxColor--green');
  }
  
  if(value > 33 && value <= 65) {
    box.classList.add('boxColor--blue');
  }else {
    box.classList.remove('boxColor--blue');
  }
  
  if(value > 65) {
    box.classList.add('boxColor--red');
  }else {
   box.classList.remove('boxColor--red')
  }
  
}

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

.boxColor--green {
  background-color: green;
}

.boxColor--red {
  background-color: red;
}

.boxColor--blue {
  background-color: blue;
}

<div class="slidecontainer">
 <p>Custom range slider:</p>
 <input type="range" min="1" max="100" value="50" class="slider" id="myRange"
       oninput="handleChange(event)">
</div>  

<div class="boxColor"></div>

我希望这会有所帮助。

根据输入元素范围更改div元素

4 个答案: