Cara buat slider opacity div

Assalamu'alaikum wr wb
Kali ini saya akan sharing bagaimana Cara buat slider opacity div.
Kita akan buat pengaturan opacity div dari slider.
berikut ini syntaxnya.
-----------------------------------------------------------------
<style type="text/css">
.background-color
{
    width: 500px;
    height: 500px;
    background: red;
    opacity: .5;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>Color Opacity</label>
    <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value">
    <output id="rangevalue">50</output>
</form>
<div class="background-color"></div>

<script type="text/javascript">
// Opacity Slider
$('#bgopacity').on('input', function (value) {
    $('.background-color').css({
        opacity: $(this).val() * '.01'
    });
});
</script>
-----------------------------------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/