dönüştürmek hsla rgba javascript veya jquery tarafından

Question

Bir ay önce javascript öğrenmeye başladım. Bu yüzden saf javascript hakkında çok şey bilmiyorum. Ben jquery ve jquery ui öğreniyorum. Hsla değerlerini rgba değerlerine dönüştürmeye çalışıyorum. Hsla rengi seçmek için jquery ui kaydırıcısını kullanıyorum. Şimdi bu jquery ui kaydırıcı değerini rgba değerine dönüştürmek istiyorum. İşte, fiddle. Stackoverflow ve web üzerinde bazı çözümler buldum. Ama onları jquery ui kaydırıcısı ile nasıl kullanacağımı anlamıyorum. Tüm çözümler neredeyse aynı görünüyor. Yani, bunlardan burada bir:

/** 
* Converts an RGB color value to HSL. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. 
* Assumes r, g, and b are contained in the set [0, 255] and 
* returns h, s, and l in the set [0, 1]. 
* 
* @param Number r  The red color value 
* @param Number g  The green color value 
* @param Number b  The blue color value 
* @return Array   The HSL representation 
*/ 
function rgbToHsl(r, g, b){ 
    r /= 255, g /= 255, b /= 255; 
    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, l = (max + min)/2; 

    if(max == min){ 
     h = s = 0; // achromatic 
    }else{ 
     var d = max - min; 
     s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
     switch(max){ 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2; break; 
      case b: h = (r - g)/d + 4; break; 
     } 
     h /= 6; 
    } 

    return [h, s, l]; 
} 

/** 
* Converts an HSL color value to RGB. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. 
* Assumes h, s, and l are contained in the set [0, 1] and 
* returns r, g, and b in the set [0, 255]. 
* 
* @param Number h  The hue 
* @param Number s  The saturation 
* @param Number l  The lightness 
* @return Array   The RGB representation 
*/ 
function hslToRgb(h, s, l){ 
    var r, g, b; 

    if(s == 0){ 
     r = g = b = l; // achromatic 
    }else{ 
     function hue2rgb(p, q, t){ 
      if(t < 0) t += 1; 
      if(t > 1) t -= 1; 
      if(t < 1/6) return p + (q - p) * 6 * t; 
      if(t < 1/2) return q; 
      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; 
      return p; 
     } 

     var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 
     var p = 2 * l - q; 
     r = hue2rgb(p, q, h + 1/3); 
     g = hue2rgb(p, q, h); 
     b = hue2rgb(p, q, h - 1/3); 
    } 

    return [r * 255, g * 255, b * 255]; 
} 

/** 
* Converts an RGB color value to HSV. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSV_color_space. 
* Assumes r, g, and b are contained in the set [0, 255] and 
* returns h, s, and v in the set [0, 1]. 
* 
* @param Number r  The red color value 
* @param Number g  The green color value 
* @param Number b  The blue color value 
* @return Array   The HSV representation 
*/ 
function rgbToHsv(r, g, b){ 
    r = r/255, g = g/255, b = b/255; 
    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, v = max; 

    var d = max - min; 
    s = max == 0 ? 0 : d/max; 

    if(max == min){ 
     h = 0; // achromatic 
    }else{ 
     switch(max){ 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2; break; 
      case b: h = (r - g)/d + 4; break; 
     } 
     h /= 6; 
    } 

    return [h, s, v]; 
} 

/** 
* Converts an HSV color value to RGB. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSV_color_space. 
* Assumes h, s, and v are contained in the set [0, 1] and 
* returns r, g, and b in the set [0, 255]. 
* 
* @param Number h  The hue 
* @param Number s  The saturation 
* @param Number v  The value 
* @return Array   The RGB representation 
*/ 
function hsvToRgb(h, s, v){ 
    var r, g, b; 

    var i = Math.floor(h * 6); 
    var f = h * 6 - i; 
    var p = v * (1 - s); 
    var q = v * (1 - f * s); 
    var t = v * (1 - (1 - f) * s); 

    switch(i % 6){ 
     case 0: r = v, g = t, b = p; break; 
     case 1: r = q, g = v, b = p; break; 
     case 2: r = p, g = v, b = t; break; 
     case 3: r = p, g = q, b = v; break; 
     case 4: r = t, g = p, b = v; break; 
     case 5: r = v, g = p, b = q; break; 
    } 

    return [r * 255, g * 255, b * 255]; 
} 

Bu here ve here bulundu.
Ayrıca, istediklerime sahip olan hslpicker.com'u da buldum.

Answer 1

Kemanınızı hafifçe değiştirdim. Burada görebilirsiniz: https://jsfiddle.net/5n5v2ygb/

Kısa açıklama. Tüm kodlayıcınızın işleyicisinden benzer kodları iki işleve taşıyorum. Bir işlev rengi ayarlar ve uygun iki metin alanını doldurur. Bu işlev, ayrıca, hslToRgb kullanın.

function setColor(hue,sat,light,alpha) { 
     var hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")"; 
    var rgb = hslToRgb(hue/360,sat/100,light/100), 
      rgba = "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+alpha+")"; 

      $("#slidevalue").text(hsla); 
      $("#slidevalue-rgba").text(rgba); 

      $(".slidevalue").css({ 
       "background-color": hsla 
      }); 

    } 

İkincisi ise sadece bu işlevi çağırmak ve [burada] slider.slide

function handler() { 
     setColor($('#range-slider1').slider('value'),$('#range-slider2').slider('value'), 
       $('#range-slider3').slider('value'), 
       $('#range-slider4').slider('value')); 
    }