javascript - 范围输入逐渐改变颜色
问题描述
我有一个范围输入,其背景目前是静态蓝色的。
我希望背景在开始时是红色的,当我将它向右移动时逐渐变成首先是黄色然后是绿色。
我怎样才能做到这一点?
这是我到目前为止所拥有的:
http://jsfiddle.net/sQx4H/386/
input[type=range] {
-webkit-appearance: none;
width: 200px;
margin: 13.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<table>
<tr>
<td colspan="3">
<input type="range" name="rangeInput" value="0" min="0" max="100">
</td>
</tr>
<tr>
<td style="text-align:left">red</td>
<td style="text-align:center">yellow</td>
<td style="text-align:right">green</td>
</tr>
</table>
感谢您的帮助!:)
解决方案
如果你改变一点 CSS,你可以这样完成:
window.onload = function() {
document.getElementById("my-range").addEventListener("input", function(e) {
const ratio = 255/100;
const currentValue = e.target.value;
let colorMaker = [0, 0 ,0];
if (currentValue < 50) {
colorMaker[0] = 255;
colorMaker[1] = currentValue * 2 * ratio;
} else {
colorMaker[0] = (100 - currentValue) * 2 * ratio;
colorMaker[1] = 255
}
const newColor = "#" + colorMaker.map(v => Math.ceil(v).toString(16).padStart(2, "0")).join("");
e.target.style.backgroundColor = newColor;
});
}
input[type=range] {
-webkit-appearance: none;
width: 200px;
margin: 13.8px 0;
background-color: red;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<table>
<tr>
<td colspan="3">
<input id="my-range" type="range" name="rangeInput" value="0" min="0" max="100">
</td>
</tr>
<tr>
<td style="text-align:left">red</td>
<td style="text-align:center">yellow</td>
<td style="text-align:right">green</td>
</tr>
</table>
推荐阅读
- ios - Google Vision API 可能存在内存泄漏
- android - Koin vs Kodein - 依赖注入你更喜欢什么?科特林
- javascript - 类型错误:context.getters.Function 不是 Vuex 的函数
- asp.net - 使用 ViewModel 时,对象不会从视图传递到控制器
- groovy - 如何在 Jmeter 中运行 shell 脚本 - Groovy
- android - 开放式回答问卷应用程序的片段或活动
- ios - UIPageViewController 中的 InputAccessoryView 默认不显示
- mongodb - 从 MongoDB 中的所有对象中获取一些值
- c# - 在多目标项目中使用 TextReader
- python - PyQT5 未找到 zlib 错误