Change css value with javascript

Question

I want change box-shadow sitting with range value like this code:

function cssV(){
   var x1 = document.getElementById("range1").value;
    var x2 = document.getElementById("range2").value;
    var x3 = document.getElementById("range3").value;
    var x4 = document.getElementById("range4").value;
	var dic = document.getElementById("test").style;
 /* dic.boxShadow=x1+"px" x2+"px" x3+"px" x4+"px" green;*/
  
  }

#test{
  width:100px;
  height:100px;
    
     background-color: red;
  box-shadow: 0px 0px 22px 10px green;
  
  }

<input type="range" name="range1" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range1"/>
<input type="range" name="range2" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range2"/>
<input type="range" name="range3" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range3"/>
<input type="range" name="range4" step="1" value="50" min="0" max="100" oninput="cssV(this.value)" style="width:100%;" id="range4"/>
<div id="test"></div>

Answer 1

You can set Box shadow using css property of jquery as below. Make sure you add jquery in your code.

function cssV(){
   var x1 = document.getElementById("range1").value;
    var x2 = document.getElementById("range2").value;
    var x3 = document.getElementById("range3").value;
    var x4 = document.getElementById("range4").value;
    $("#test).css('box-shadow' , "inset " + x1 +"px " + x2+"px "+ x3+"px "+ x4+"px " + "green");

  }