JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="wrapper">
    <input type="range" id="slider" min="1" max="20" value="5" step="1" />  
    <div id="target"></div>
</div>

CSS

#wrapper { width: 500px; height: 500px; margin: 100px auto; }

#target { height: 200px; width: 200px; border: 1px solid Black; }

JavaScript

$(document).ready(function() {
    SetShadow();
    $("#slider").change(function() {
        SetShadow();    
    });
});


function SetShadow() {
   var value = document.getElementById('slider').value;
   $("#target").css("box-shadow", value + "px " + value + "px " + Math.pow(value,1.2) + "px #888");
    
}