要使渐变正常工作，需要对代码进行一些修复：

1. input元素的选择必须使用jQuery的$（...）函数完成，而不是document. getElementById（...）。
2. input元素的oninput函数必须链接到jQuery的input事件。
   1.滑块值应规格化为0到1，而不是0到100。
   1.必须更正渐变CSS声明，以便对颜色值使用正确的表示法（例如：RGBA（255，255，255，1）应该是RGBA（255，255，255，1.0））。
   通过这些修复，代码将如下所示：

• • 超文本标记语言**：

<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");
});

• • 中央支助组**：

.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;
}

请记住，标记用于在HTML页面的页眉中声明CSS样式，不应用于在jQuery中动态创建样式。在上面的代码中，我们使用了appendTo方法将动态创建的CSS样式添加到**#filter**元素中。

您的代码存在一些问题：

• 您试图在每个输入中添加新的样式，我为样式添加了一个HTML元素，它可以在每次输入时更新样式的内容;
• 由于某种原因，颜色未显示。我已将rgba(0,0,0,0)更改为rgba(0,0,0,.1)，以便您能够看到它
• #filter div在滑块的顶部，这就是为什么你不能激活它。左边的浮动消失了，现在它可以工作了。

var sliderValue = $('#range'),
    filterStyle = $('#filter-before');
    
sliderValue.on('input', function() {
  var val1 = this.value;
  var val2 = 100 - val1;
  filterStyle.html('#filter:before{background: linear-gradient(to top, rgba(255,255,255,1) ' + val1 + '%,rgba(0,0,0,.1) ' + val2 + '%);}');
});

.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;
  max-height: 480px;
  width: 200px;
  height: 200px;
}

#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;
}

<style id="filter-before"></style>
<div class="container">
  <input type="range" min="0" max="100" 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>

正如在其他答案中所指出的，您的初始代码存在许多问题，主要是当sliderValue元素每次触发input事件时，您都试图向文档添加<style>元素，不幸的是，sliderValue对象是一个jQuery对象，没有oninput方法。
要将事件处理程序与jQuery对象绑定，应使用on()方法：

sliderValue.on('<eventName>', function(){
  // functionality
});

然而，尽管其他人的回答显示了改进的jQuery方法，但我认为我应该借此机会向您展示如何通过纯JavaScript和CSS自定义属性来管理它，如下所示（代码中有解释性注解）：
x一个一个一个一个x一个一个二个一个x一个一个三个一个
JS Fiddle demo.
参考文献：

• CSS：
• aspect-ratio.
• calc().
• clamp().
• CSS Colors Module Level 4.
• CSS颜色模块级别4语法示例。
• CSS custom properties.
• CSS logical properties.
• display.
• gap.
• linear-gradient().
• var().
• 超文本：
• custom data-* attributes.
• JavaScript语言：
• 数组文本（[...]）。
• Array.prototype.forEach().
• Arrow functions.
• document.
• Event constructor.
• EventTarget.addEventListener().
• EventTarget.dispatchEvent().
• Spread syntax.
• Template-literals.