HTML5の入力範囲：runnable-trackの色を現在の値に変更します

Question

input type=rangeを使用すると、2色でトラックの背景色を変更することで、ブートストラップスライダーを模倣できますか？

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

Answer 1

方法はカラーグラデーションcheck this one、 に似ているので、何をしなければならないことは範囲入力に応じて、各1の現在の割合に基づか2つの色を混合することですです。この場合、Inputの各辺は確実に1つの色を表します。

これを実現するには、数学で少し演奏する必要があります。それで、の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