HTML5輸入範圍：將可運行軌道的顏色更改爲當前值

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 "ABCDEF".charAt((n - n % 16)/16) 
      + "ABCDEF".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