javascript - 使用 JQuery Range Slider 实时更新 CSS 值

Question

我正在尝试使用单独的范围 slider 来实时更新以下 CSS 属性(特别是 minmax(20vw)、网格间隙和高度):

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

#item {
height: 150px;
}

我正在使用 CSS 网格和一些“VW 值”，所以我不确定我是否将这些复杂化了。我真的不知道从哪里开始。

实时可编辑代码笔: https://codepen.io/db13/pen/ypdPOO

更新: 每个单独的范围 slider 应单独更新每个属性:
slider 1:网格间隙
slider 2:分区宽度
slider 3:分区高度

Answer 1

您需要使用不同的 CSS 属性。给定以下示例:

// gap update
$("#slider-grid").on('input change', function(e) {
    var minmax = this.value;
    $("#wrapper").css("grid-gap", minmax + 'px')
});

// height update
$("#slider-height").on('input change', function(e) {
    var minmax = this.value;
    $(".item").css("height", minmax + 'px')
});

// width update
$("#slider-width").on('input change', function(e) {
    var minmax = this.value;
    $("#wrapper").css("grid-template-columns", "repeat(auto-fit, minmax(" + minmax + "vw, 1fr))")
});

CodePen Link - V2

希望对你有帮助。