Javascript animation Resize two divs by input type range Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Javascript animation Resize two divs by input type range without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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/bootstrap@5.0.0-beta3/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/bootstrap@5.0.0-beta3/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>
We are here to answer your question about Javascript animation Resize two divs by input type range - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji