HTML5输入范围：将runnable-track的颜色更改为当前值

Question

使用input type=range，如何以两种颜色更改轨道的背景颜色，以便模仿引导滑块？

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

Answer 1

该方法类似于颜色渐变 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>  

这是一个有效的 DEMO ：Jsfiddle