使用jQuery Range Slider实时更新CSS Grid列与列间距问题求助

原代码存在几处明显问题，导致滑块无法正常工作，以下是修复后的完整代码及问题说明：

问题分析 #

1. 所有range输入框的value属性错误设置为字符串"contrast"，而非对应CSS属性的初始数字值，导致初始状态不匹配
2. 高度滑块的最大值（100px）与.item的初始高度（150px）不匹配，无法还原初始样式
3. 宽度滑块未设置合理最小值，过小的数值会导致网格列过窄，影响布局

修复后的完整代码 #

HTML #

<div id="contrastSlider">
     <input id="slider-grid" type="range" value="20" max="100" min="0" step="1"/>
  <input id="slider-height" type="range" value="150" max="150" min="50" step="1"/>
  <input id="slider-width" type="range" value="20" max="50" min="10" step="1"/>
</div>

<div id="wrapper">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS #

body {
  margin: 20px;
  background: black;
}

#wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
  grid-gap: 20px;
}

.item {
  height: 150px;
  border: 0px solid #eee;
  box-shadow: 0 0px 0px 0 rgba(0,0,0,0.1);
  display: inline-block;
  border-radius: 0px;
  margin: 0vw;
  background: orange;
  border: 0px solid orange;
}

JavaScript #

$(document).ready(function(e) {
  
    $("#slider-grid").on('input change', function(e) {
        var gapValue = this.value;
        $("#wrapper").css("grid-gap", gapValue + 'px')
    });
  
    $("#slider-height").on('input change', function(e) {
        var heightValue = this.value;
        $(".item").css("height", heightValue + 'px')
    });
  
    $("#slider-width").on('input change', function(e) {
        var widthValue = this.value;
        $("#wrapper").css("grid-template-columns", `repeat(auto-fit, minmax(${widthValue}vw, 1fr))`)
    });
  
});

修复说明 #

• 修正滑块的value为对应CSS属性的初始数值，确保初始状态与样式一致
• 调整高度滑块的max为150、min为50，匹配.item的高度范围
• 给宽度滑块设置min="10"，避免列宽过窄，同时调整max为50限制最大列宽
• 优化变量命名，提升代码可读性
• 使用模板字符串简化CSS属性拼接逻辑

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