Как получить значение цвета от градиента в процентах с помощью javascript?

Question

У меня есть фиксированная ширина div с градиентом, применяемым с помощью css. Я хочу создать слайдер на основе этого градиента.

Когда я перетаскиваю ползунок, я вычисляю процентное положение, и я хочу получить код цвета hex или rgb на основе этого значения.

Моя идея состояла в том, чтобы создать массив с начальными/конечными позициями и цветами, а затем найти два значения из этого массива на основе положения ползунка, а затем найти цвет между ними: здесь я не могу двигаться вперед ,

Демо: 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

Я был в состоянии решить эту проблему, используя эту функцию, основанную на функции 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; 
} 

Я просто нужно пройти два самых близких цветовых кода от градиентной матрицы и соотношение, где расположена рукоятка ползунка (которую можно легко вычислить с помощью ширины ползунка). Вот живой пример:

http://jsfiddle.net/vksn3yLL/