Degrade ile renk değeri javascript ile yüzde nasıl alınır?

Question

Css kullanılarak uygulanan gradyanlı sabit genişlik divum var. Bu degradeye göre kaydırıcı tabanlı renk seçici oluşturmak istiyorum.

Kaydırıcıyı sürüklediğimde yüzde konumunu hesaplıyorum ve bu değere göre onaltılık veya rgb renk kodunu almak istiyorum.

Fikrim başlangıç ​​/ bitiş konumlarına ve tanımlanan renklere sahip bir dizi oluşturmak, daha sonra bu diziden kaydırıcı konumuna göre iki değer bulmak, sonra bir şekilde rengi bulmak: Bu, ileriye hareket edemeyeceğim yerdi .

Demo: http://jsfiddle.net/pdu8rpfv/

var gradient = [ 
    [ 
     0, 
     'ff0000' 
    ], 
    [ 
     28, 
     '008000' 
    ], 
    [ 
     72, 
     '0000ff' 
    ], 
    [ 
     100, 
     'ff0000' 
    ] 
]; 
$("#slider").slider({ 
    min: 1, 
    slide: function(event, ui) { 

     var colorRange = [] 
     $.each(gradient, function(index, value) { 
      if(ui.value<=value[0]) { 
       colorRange = [index-1,index] 
       return false; 
      } 
     }); 

     $('#result').css("background-color", 'red'); 

    } 
}); 

Answer 1

Ben less.js işlevi dayalı olan bu fonksiyonu kullanarak bu sorunu çözmek için başardı: http://lesscss.org/functions/#color-operations-mix

function pickHex(color1, color2, weight) { 
    var w1 = weight; 
    var w2 = 1 - w1; 
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2), 
     Math.round(color1[1] * w1 + color2[1] * w2), 
     Math.round(color1[2] * w1 + color2[2] * w2)]; 
    return rgb; 
} 

Sadece basitçe geçmesi gerekiyor degrade dizisinden en yakın iki renk kodu ve kaydırıcı tutamacının bulunduğu oran (kaydırıcı genişliğinin yardımıyla kolayca hesaplanabilir).

http://jsfiddle.net/vksn3yLL/