JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<div class="background-color"></div>
<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>

CSS

.background-color {
    width: 500px;
    height: 500px;
    background: red;
    opacity: .5;
}

JavaScript

// Opacity Slider
$('#bgopacity').on('input', function () {
    console.log($('#bgopacity').val());
    $('.background-color').css({
        opacity: $(this).val() * '.01'
    });
});