hsla to rgba wit jq ui slider

HTML

<div class="a"><a class="name">Hue</a><div id="range-slider1"></div></div>
<div class="a"><a class="name">Saturation</a><div id="range-slider2"></div></div>
<div class="a"><a class="name">Lightness</a><div id="range-slider3"></div></div>
<div class="a"><a class="name">Alpha</a><div id="range-slider4"></div></div>
<p>
    <a class="slidevalue"></a>
    <a id="slidevalue">hsla(0, 100%, 50%, 1)</a>
    <a id="slidevalue-rgba">rgba(255, 0, 0, 1)</a>
    <br>
    <a class="note"><strong style="color: ;">note: </strong>I want to change rgba color code like hsla when sliders slide.</a>
</p>

CSS

body {
    font-family: arial;
    background: #333;
    color: #fff;
}
#range-slider1, #range-slider2, #range-slider3, #range-slider4 {
    right: 30px;
    display: inline-block;
    width: calc(100% - 150px);
    position: absolute;
}
.a {
    margin: 10px 0px;
}
.slidevalue {
    display: inline-block;
    height: 50px;
    border: 5px solid #FFF;
    width: 50px;
    margin-left: 15px;
    background-color: rgba( 255, 0,0, 1);
}
#slidevalue {
    display: inline-block;
    border: 0px;
    line-height: 20px;
    color: #b9cd6d;
    position: absolute;
    font-weight: bold;
    margin-left: 10px;
}
.name {
    display: inline-block;
}
#slidevalue-rgba {
    display: inline-block;
    border: 0px;
    line-height: 50px;
    color: #b9cd6d;
    position: absolute;
    font-weight: bold;
    margin-left: 10px;
}
.note {
    color: #FFF;
}
*:focus {
    outline: none;
}

JavaScript

$(function() {
function hsl2rgb(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];
};
	function setColor(hue,sat,light,alpha) {
		var hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
    var rgb = hsl2rgb(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
            });  
            
  };

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

	$( "#range-slider1" ).slider({
        range:false,
        min: 0,
        max: 360,
        value: 0,
        slide: handler
    });

    $( "#range-slider2" ).slider({
        range:false,
        min: 0,
        max: 100,
        value: 100,
        slide: handler
    });

    $( "#range-slider3" ).slider({
        range:false,
        min: 0,
        max: 100,
        value: 50,
        slide: handler
    });
    
    $( "#range-slider4" ).slider({
        range:false,
        min: 0,
        max: 1,
        value: 1,
        step: 0.01,
        slide: handler
    });
});