जावास्क्रिप्ट के साथ प्रतिशत से ढाल से रंग मूल्य कैसे प्राप्त करें?

Question

मेरे पास सीएसएस का उपयोग करके लागू ढाल के साथ एक निश्चित चौड़ाई div है। मैं इस ढाल के आधार पर स्लाइडर आधारित रंग पिकर बनाना चाहता हूं।

जब मैं स्लाइडर खींचता हूं तो मैं प्रतिशत की स्थिति की गणना करता हूं, और मैं इस मान के आधार पर हेक्स या आरजीबी रंग कोड प्राप्त करना चाहता हूं।

मेरा विचार स्टार्ट/स्टॉप पोजिशन और रंग परिभाषित रंगों के साथ एक सरणी बनाना था, फिर स्लाइडर स्थिति के आधार पर इस सरणी से दो मान पाएं, फिर किसी भी तरह के रंग को ढूंढें: यह वह जगह है जहां मैं आगे नहीं बढ़ सकता ।

डेमो: 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/