Control RGBA with Range Slider of JqUI

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>

<div class="divt"></div>

CSS

.slide {
    margin-top: 20px;
    margin-left: 20px;
    width: 400px;
    background: red;
}
.divt{
  width:350px;
  height:350px;
  margin:20px auto;
  border:1px solid #333;
}

JavaScript

$(document).ready(function() {
    $('#slide1').slider({
        slide: function(event, ui) {
            // from pure red to pure green
            var r, g, b = 0;
            a = ui.value / 100;
            r = 1;
            g = 1;
            b = 1;
            var bg = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
            $('.divt').css({
                'background': bg + 'url("http:\/\/bowvalleyclub.com\/content\/media\/images\/css\/floralPattern.png") bottom left no-repeat'
            });
           
        }
    });
});