Come ottenere il valore del colore dal gradiente per percentuale con javascript?

Question

Ho un div di larghezza fissa con sfumatura applicata usando css. Voglio creare un selettore di colori basato su slider basato su questo gradiente.

Quando trascino il cursore, calcolo la posizione percentuale e voglio ottenere il codice colore esadecimale o rgb in base a questo valore.

La mia idea era di creare un array con le posizioni start/stop e i colori definiti, quindi trovare due valori da questo array in base alla posizione del cursore, quindi in qualche modo trovare il colore tra: questo è dove non posso andare avanti .

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

sono stato in grado di risolvere questo problema di utilizzare questa funzione, che si basa sulla funzione less.js: 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; 
} 

Ho semplicemente bisogno di passare la due codici colore più vicini dall'array del gradiente e il rapporto in cui si trova la maniglia del cursore (che può essere calcolata facilmente con l'aiuto della larghezza del cursore). Ecco l'esempio vivo:

http://jsfiddle.net/vksn3yLL/