Leverage JQuery's Range Slider for Real-Time CSS Value Updates

Question

Leverage JQuery's Range Slider for Real-Time CSS Value Updates

Trying to dynamically update CSS properties such as minmax(20vw), grid-gap, and height using individual range sliders:

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

#item {
height: 150px;
}

Utilizing CSS grid and 'VW values', not sure if it's complicating the process. Any guidance on where to start is appreciated.

Editable live codepen available here: https://codepen.io/db13/pen/ypdPOO

UPDATE: Each range slider will now correspond to a specific property:
Slider 1: Grid Gap
Slider 2: Div width
Slider 3: Div Height

javascript jquery html css rangeslider

Answer 1

Answer №1

To achieve the desired result, utilize a different CSS property as shown in the example below:

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

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

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

Check out the CodePen Link - V2

Implement these changes and hopefully it will be helpful for you.

Answer 2

To achieve the desired result, utilize a different CSS property as shown in the example below:

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

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

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

Check out the CodePen Link - V2

Implement these changes and hopefully it will be helpful for you.

Leverage JQuery's Range Slider for Real-Time CSS Value Updates

Answer №1

Similar questions

What is the best way to add an active class to a clicked menu item that already has a class

The event listener attached to this model is failing to trigger when there are

Guide on redirecting to the login page in angular2 when a process is left incomplete

Reasons why text does not show color when a style element is applied

How can I retrieve the value of a JavaScript variable using Ajax?

Preserving the initial input values in a secure manner for future reference, utilizing either an object or a

How come I am unable to expand a collection of objects using Zustand?

What are some alternative methods for organizing folder structure in Express Handlebars when managing views?

Selenium Python option other than using send_keys()

What is the best way to ensure consistent Box Overlay Height across multiple boxes?

Ways to execute a task based on various selection option values?

Can you customize the buttons in the operation panel of an antd image preview window?

How can certain HTML be redirected or hidden for users on mobile devices?

Creating an Engaging Data Visualization: Blending Candlestick Insights with Line Graphs

Avoiding metacharacters and utilizing them as a string variable for selection

Accessing Private Files with Signed URLs from AWS S3

Choose several identifiers that possess strikingly similar titles

Ways to decrease the width of a outlined material icon

Transition the object in smoothly after the slide has changed

How to position one div next to another using CSS and HTML