Javascript animation Resize two divs by input type range

I am trying to find a way, on how to resize two divs by the drag of an <input type="range">. Basically what i want to do is when the user drags the input the one div will get bigger and the other one smaller.. and the opposite. You can run the snippet below.

I am new to the animations with javascript and i don’t know how or from where to start and what to search on the internet. Feel FREE to suggest me tutorials or videos, Thank you for your time.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>


<div class="container mt-5 pt-5 text-center">
    <div class="row">

        <div class="col-6">
            <div style="background-color:red; width:100%; height:100%">
                <h3>Test</h3>
            </div>
        </div>

        <div class="col-6">
            <div style="background-color:red; width:100%; height:100%">
                <h3>Test</h3>
            </div>
        </div>

        <input type="range" class="mt-5">
    </div>

</div>




<script src="main.js"></script>
</body>
</html>

Answer

You can calculate how much of your slider is filled and pass those percentages to your div elements.

// Define min and max value that can be entered
const MIN = 0;
const MAX = 100;

// Get elements
const slider = document.getElementById('range-slider');
const leftBlock = document.getElementById('left');
const rightBlock = document.getElementById('right');

// Force min and max values (could also be added inside your HTML)
slider.setAttribute('min', MIN);
slider.setAttribute('max', MAX);

// Start halfway
slider.value = MAX / 2;

// Fires when the value of the slider changes
slider.addEventListener('input', ({ target }) => {
  // Calculate percentages
  const leftInPercentage = Math.round(target.value / MAX * 100);
  const rightInPercentage = 100 - leftInPercentage;
  
  // Update width
  leftBlock.style.width = `${leftInPercentage}%`;
  rightBlock.style.width = `${rightInPercentage}%`;
  
  // For debugging purposes
  console.clear();
  console.log(`Value: ${target.value}`);
  console.log(`Percentage: ${leftInPercentage}% - ${rightInPercentage}%`);
});
.block {
  width: 50%;   /* Since we start halfway in our JS we need to match our CSS */
  height: 100%;
  float: left;
}

#left {
  background: red;
}

#right {
  background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>


<div class="container mt-5 pt-5 text-center">
    <div class="row">

        <div class='col-12'>
            <div id="left" class="block">
                <h3>Test</h3>
            </div>

            <div id="right" class="block">
                <h3>Test</h3>
            </div>
        </div>
        
        <div class='col-12'>
            <input id="range-slider" type="range" class="mt-5">
        </div>
    </div>
</div>




<script src="main.js"></script>
</body>
</html>