如何创建可修改CSS :before线性渐变参数的输入滑块？

你的代码存在几个关键问题导致效果不生效，以下是修正方案：

问题分析 #

• 动态生成的<style>标签被插入到#filter容器内，不符合HTML规范，浏览器无法正确解析这类嵌套样式标签。
• 动态样式中缺少background属性声明，仅写了渐变函数，浏览器无法识别该样式规则。
• jQuery对象直接赋值oninput事件的方式不正确，应该使用jQuery标准的事件绑定API。
• 每次拖动滑块都会新增一个style标签，造成样式冗余，影响页面性能。

修正后的完整代码 #

HTML #

<div class="container">
   <input type="range" min="0" max="100" value="15" 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>

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) 15%,rgba(0,0,0,0) 22%);
    z-index: 1;
}

JavaScript #

// 预先在head中创建专属style标签，避免重复创建冗余标签
const filterStyle = $('<style id="filter-dynamic-style"></style>').appendTo('head');

// 使用jQuery标准事件绑定方式监听滑块输入
$('#range').on('input', function(){
    const val1 = this.value;
    const val2 = 100 - val1;
    // 替换已有style标签内容，而非新增标签
    filterStyle.html(`#filter:before{background: linear-gradient(to top, rgba(255,255,255,1) ${val1}%,rgba(0,0,0,0) ${val2}%);}`);
});

关键修改说明 #

1. 提前在<head>中创建专用style标签，每次滑块拖动仅更新标签内的样式内容，避免冗余代码堆积。
2. 补全background属性名，确保渐变样式能被正确识别并应用到伪元素上。
3. 使用jQuery的.on('input', ...)方法绑定事件，符合jQuery的事件处理规范。
4. 将动态样式标签插入到<head>中，遵循HTML结构规范，保证浏览器能正确解析样式规则。

内容的提问来源于stack exchange，提问作者Dawid Dudek