CODEWITHSUNDEEP
javascriptjqueryhtmlcssrangeslider
johnny555
johnny555

Reputation: 183

Use JQuery Range Slider to Live-Update a CSS Value

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

Answers (1)

Ashok Shah
Ashok Shah

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))")
});

CodePen Link - V2

I hope it helps.

Upvotes: 1

Related Questions