HTML范围滑块的颜色根据输入从红色变为绿色

Question

我想创建一个范围滑块，其中颜色应根据输入自动从红色变为绿色。

 function getColor(value) { //value from 0 to 1 var hue = ((1 - value) * 120).toString(10); return ["hsl(", hue, ",100%,50%)"].join(""); } var len = 10; for (var i = 0; i <= len; i++) { var value = i / len; var d = document.createElement('div'); d.textContent = "value=" + value; d.style.backgroundColor = getColor(value); document.body.appendChild(d); } var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } 

 .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 10px; border-radius: 5px; background: red; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 23px; height: 24px; border: 0; background: url('contrasticon.png'); cursor: pointer; } .slider::-moz-range-thumb { width: 23px; height: 24px; border: 0; background: url('contrasticon.png'); cursor: pointer; } 

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

Answer 1

我已经用线性渐变替换了背景色。 通过替换背景中的线性渐变来更改不透明度。 希望这可以帮助。

 var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } 

 .slidecontainer { width: 100%; } .slider { width: 100%; height: 10px; border-radius: 5px; background-image: linear-gradient(to right, rgba(255, 0, 0, 0.7), rgba(0, 128, 0, 0.7)); outline: none; opacity: 0.7; transition: opacity .2s; -webkit-appearance: none; } .slider:hover { background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 128, 0, 1)); } .slider::-webkit-slider-thumb { width: 23px; height: 24px; border: 0; background: url('contrasticon.png'); cursor: pointer; } .slider::-moz-range-thumb { width: 23px; height: 24px; border: 0; background: url('contrasticon.png'); cursor: pointer; } 

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

Answer 2

更改滑块时，将触发事件.oninput 。 目前，您分配给此事件的功能仅更新Value:的文本值。 我已将以下行添加到此函数：

this.style.backgroundColor = getColor(this.value / 100);

这将基于其值除以100来更改滑块的背景颜色（例如，滑块值40变为0.4，显示为绿色/黄色）。

 function getColor(value) { //value from 0 to 1 var hue = ((1 - value) * 120).toString(10); return ["hsl(", hue, ",100%,50%)"].join(""); } var len = 10; for (var i = 0; i <= len; i++) { var value = i / len; var d = document.createElement('div'); d.textContent = "value=" + value; d.style.backgroundColor = getColor(value); document.body.appendChild(d); } var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; this.style.backgroundColor = getColor(this.value / 100); } //initial trigger so turns the right colour. slider.oninput(); 

 .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 10px; border-radius: 5px; background: red; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { appearance: none; width: 23px; height: 24px; border: 0; background: url('contrasticon.png'); cursor: pointer; } .slider::-moz-range-thumb { width: 23px; height: 24px; border: 0; background: url('contrasticon.png'); cursor: pointer; } 

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