hsla to rgba wit jq ui slider

by Shohidul Alam

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() {
	$( "#range-slider1" ).slider({
        range:false,
        min: 0,
        max: 360,
        value: 0,
        slide: function( event, ui ) {
            var hue = ui.value,
                sat = $('#range-slider2').slider('value'),
                light = $('#range-slider3').slider('value'),
                alpha = $('#range-slider4').slider('value'),
                hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";

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

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

        }
    });

    $( "#range-slider2" ).slider({
        range:false,
        min: 0,
        max: 100,
        value: 100,
        slide: function( event, ui ) {
            var hue = $('#range-slider1').slider('value'),
                sat = ui.value,
                light = $('#range-slider3').slider('value'),
                alpha = $('#range-slider4').slider('value'),
                hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
            $("#slidevalue").text(hsla);
            $(".slidevalue").css('background-color', hsla);

        }
    });

    $( "#range-slider3" ).slider({
        range:false,
        min: 0,
        max: 100,
        value: 50,
        slide: function( event, ui ) {
            var	hue = $('#range-slider1').slider('value'),
                sat = $('#range-slider2').slider('value'),
                light = ui.value,
                alpha = $('#range-slider4').slider('value'),
                hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")";
            $("#slidevalue").text(hsla);
            $(".slidevalue").css('background-color', hsla);

        }
    });
    
    $( "#range-slider4" ).slider({
        range:false,
        min: 0,
        max: 1,
        value: 1,
        step: 0.01,
        slide: function( event, ui ) {
            var	hue = $('#range-slider1').slider('value'),
             ...