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


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 + "%"; = this.value + "%";

        //document.getElementById("rightDemo").innerHTML = this.value + "%";
        // = 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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="[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'>

<div class="clearfix pt-5">

    <div class="img-container">
        <img src="" alt="Italy" style="width:40%;" id="left">
        <h3 id="leftDemo"></h3>

    <div class="img-container">
        <img src="" alt="Mountains" style="width:100%;" id="right">
        <h3 id="rightDemo"></h3>


<div class="container text-center">

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


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

Source: Ask Javascript Questions