How to create input slider that changes values of css :before linear-gradient?

I want to create a gradient effect using pseudo-element :before on an image that user would change by moving a slider input. I tried to get to it by following code, but no luck so far

var sliderValue = $('#range');

sliderValue.oninput = function(){
    var val1 = this.value;
    var val2 = 100-val1;     
    $('<style> #filter:before{linear-gradient(to top, rgba(255,255,255,1) '+val1+'%,rgba(0,0,0,0) '+val2+'%);}</style>').appendTo("#filter");
};

.slider
{
    -webkit-appearance:none;
    appearance:none;
    width: 100%;
    height: 10px;
    max-width: 400px;
    background-color: #ccc;
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
}
#filter {
    position:relative;
    float: left;
    max-height: 480px; 
    
}

#filter:before {
    content: "";
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    width:320px;
    height:100%;
    background: linear-gradient(to top, rgba(255,255,255,1) 15%,rgba(0,0,0,0) 22%);
    z-index: 1;
}

<div class="container">
   <input type="range" min="0" max="100" value="0" class="slider" id="range">    
   <div id="filter">  
    <img id="previewImg" src="img/dummy_320x480_ffffff_d002e2.png" alt="Placeholder" style="height: 100%; width:320px;">
   </div>
</div>  
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

>Solution :

There are a few fixes that need to be made to the code for the gradient to work properly:

1. The selection of the input element must be done with jQuery’s $(…) function, instead of document.getElementById(…).
2. The input element’s oninput function must be linked to jQuery’s input event.
3. The slider value should be normalized from 0 to 1 instead of 0 to 100.
4. The gradient CSS declaration must be corrected to use the correct notation for the color value (example: rgba(255,255,255,1) should be rgba(255,255,255,1.0)).

With these fixes, the code would look like this:

HTML:

<div class="container">
  <input type="range" min="0" max="100" value="0" class="slider" id="range">    
  <div id="filter">
    <img id="previewImg" src="img/dummy_320x480_ffffff_d002e2.png" alt="Placeholder" style="height: 100%; width:320px;">
  </div>
</div>

jQuery:

var sliderValue = $('#range');
sliderValue.on('input', function() {
  var val1 = this.value / 100;
  var val2 = 1 - val1;
  $('<style> #filter:before {background: linear-gradient(to top, rgba(255,255,255,1.0) ' + val1*100 + '%, rgba(0,0,0,0) ' + val2*100 + '%);}</style>').appendTo("#filter");
});

CSS:

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  max-width: 400px;
  background-color: #ccc;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

#filter {
  position: relative;
  float: left;
  max-height: 480px; 
}

#filter:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 100%;
  background: linear-gradient(to top, rgba(255,255,255,1.0) 15%, rgba(0,0,0,0) 22%);
  z-index: 1;
}

Remember that the tag is used to declare CSS styles in the header of the HTML page, and should not be used to dynamically create styles in jQuery. In the code above, we used the appendTo method to add the dynamically created CSS style to the #filter element.