Reputation: 183
I'm trying to use individual range sliders to live-update the following CSS properties (specifically, minmax(20vw), grid-gap, and height):
#wrapper {
grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
grid-gap: 20px;
}
#item {
height: 150px;
}
I'm using CSS grid and some 'VW values', so I'm not sure if I'm complicating things with these. I don't really know where to begin.
Live editable codepen: https://codepen.io/db13/pen/ypdPOO
UPDATE:
Each individual range slider should update each property individually:
Slider 1: Grid Gap
Slider 2: Div width
Slider 3: Div Height
Upvotes: 1
Views: 917
Reputation: 956
You need to use different CSS property. Given sample below:
// 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))")
});
I hope it helps.
Upvotes: 1