Currently, I am in the process of creating a JQuery range slider that can dynamically update the columns and column-gaps of my photo grid. While searching for a solution, I came across a relevant post where someone had shared their code. However, there seems to be an error in the code provided, and unfortunately, I lack the expertise to rectify it.
If you're interested, here is the link to the post: Use JQuery Range Slider to Live-Update a CSS Value
The snippet of code they shared is as follows:
$(document).ready(function(e) {
$("#slider-grid").on('input change', function(e) {
var minmax = this.value;
$("#wrapper).css("grid-gap", minmax + 'px')
});
$("#slider-height").on('input change', function(e) {
var minmax = this.value;
$(".item").css("height", minmax + 'px')
});
$("#slider-width").on('input change', function(e) {
var minmax = this.value;
$("#wrapper").css("grid-template-columns", "repeat(auto-fit, minmax(" + minmax + "vw, 1fr))")
});
});
Your assistance in resolving this issue would be greatly appreciated!