Javascript Resize two images by input type range (duplticate) / half completed

  javascript

As you can see from the snippet below i have this two images.. by dragging the <input type="range"> i want the right one to get bigger and the left one to get smaller, and the opposite.. This is what i have done so far on my own.. it works only for the right one and i can’t think a way to do it for the left one in the same time.. For example when the left image will be width = 100% the right must be 40%
Any suggestions ? Thank you

let left = document.getElementById('left');
let right = document.getElementById('right');
let slider = document.getElementById('range-slider');

    slider.oninput = function(){

        document.getElementById("leftDemo").innerHTML = this.value + "%";
        left.style.width = this.value + "%";


        //document.getElementById("rightDemo").innerHTML = this.value + "%";
        //right.style.width = this.value + "%";


    }
* {
    box-sizing: border-box;
}

.img-container {
    float: left;
    width: 40%;
    padding: 5px;
}


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
<!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="clearfix pt-5">

    <div class="img-container">
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="Italy" style="width:40%;" id="left">
        <h3 id="leftDemo"></h3>
    </div>



    <div class="img-container">
        <img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" alt="Mountains" style="width:100%;" id="right">
        <h3 id="rightDemo"></h3>
    </div>

</div>


<div class="container text-center">

    <input id="range-slider" type="range" min="40" max="100" >


</div>




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

Source: Ask Javascript Questions

LEAVE A COMMENT