JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div id="slider"></div>
<div id="foo" class="element-active"></div>

CSS

#foo {
    width:100px;
    height:100px;
    background-color:rgba(255,0,0,1);
    border:1px solid #eee;
    margin: 10px;
}
#slider { margin: 10px; }

JavaScript

var slider = $('#slider');

slider.slider({
    min: 0,
    max: 1,
    step: 0.1,
    value: 0.5,
    slide: function(event, ui) {

        var value = slider.slider('value'),
            div = $('.element-active');

        div.css('background-color', 'rgba(255,0,0,' + value + ')');
        console.log(value);
    }
});