gpt4 book ai didi

javascript - HTML5 输入范围 : change color of runnable-track up to current value

转载 作者:行者123 更新时间:2023-11-28 06:14:15 26 4
gpt4 key购买 nike

使用input type=range,如何将轨道的背景颜色更改为两种颜色,以便我可以模仿引导 slider ?

<input class="slider"
type="range"
min="0"
max="100"
step="1"
/>

enter image description here

最佳答案

方法类似于颜色渐变 check this one ,因此,您要做的就是根据范围输入根据每种颜色的当前百分比混合两种颜色,因此在这种情况下,输入的每一侧肯定代表一种颜色。

要实现这一点,您需要玩一点数学,因此您还需要将颜色转换为数学形式,例如 RGB

然后计算新的颜色百分比,将它们相加,最后得到新的颜色。

因此您将需要以下功能:

<script>

//The following functions to convert the Hex color to RGB
function hexToR(h) {
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h) {
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h) {
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h) {
return (h.charAt(0) == "#") ? h.substring(1, 7) : h
}

//Convert resulted color to Hex
function rgbToHex(R, G, B) {
return "#" + toHex(R) + toHex(G) + toHex(B)
}
function toHex(n) {
n = parseInt(n, 10);
if (isNaN(n))
return "00";
n = Math.max(0, Math.min(n, 255));
return "0123456789ABCDEF".charAt((n - n % 16) / 16)
+ "0123456789ABCDEF".charAt(n % 16);
}

//Mixing colors in one new color
function colorMix(color1, color2, value) {
var color1Value = value;
var color2Value = 100 - value;

var colorR = ((color1Value / 100) * hexToR(color1)) + ((color2Value / 100) * hexToR(color2));
var colorB = ((color1Value / 100) * hexToB(color1)) + ((color2Value / 100) * hexToB(color2));
var colorG = ((color1Value / 100) * hexToG(color1)) + ((color2Value / 100) * hexToG(color2));

return rgbToHex(colorR, colorG, colorB);
}

</script>

这是一个有效的演示:Jsfiddle

关于javascript - HTML5 输入范围 : change color of runnable-track up to current value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36109752/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com