<div id="app">
  
</div>

body{
  height:100vh;
  background:yellowgreen;
}
.box{
  width:100px;
  height:100px;
  border:3px solid rgba(255,0,0,.5);
  box-shadow:10px 5px 0 0 rgba(0,0,0,.5);
  background:transparent;
}

function App(){
  const [value,changeValue] = React.useState(0)
  const boxShadow = React.useMemo(()=>{
    return {
      'box-shadow':`10px 5px ${value}px 0 rgba(0,0,0,.5)`
    }
  },[value])
  const onChange = (e)=>{
    changeValue(e.target.value)
  }
  return (
    <div>
      <div style={boxShadow} className="box"></div>
      <input type="range" value={value} onChange={onChange} min="0" max="10"/>
    </div>
  )
}

ReactDOM.render(<App/>,document.getElementById('app'))