CODEWITHSUNDEEP
javascript
Markos
Markos

Reputation: 208

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 + "%";
        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>

Upvotes: 1

Views: 104

Answers (2)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48683

You will need to subtract the value from the max (100) and add the min (40) to the opposite image's new width.

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

const calSizes = (slider) => {
  const
    value = parseInt(slider.value, 10),
    min = parseInt(slider.getAttribute('min'), 10),
    max = parseInt(slider.getAttribute('max'), 10);
  return [ value, min + max - value ];
};

const resizeImages = (e) => {
  const [ value, inverted ] = calSizes(e.target);
      
  left.querySelector('img').style.width = `${value}%`;
  right.querySelector('img').style.width = `${inverted}%`;
  
  left.querySelector('h3.scale').textContent = `${value}%`;
  right.querySelector('h3.scale').textContent = `${inverted}%`;
};

slider.addEventListener('input', resizeImages);

resizeImages({ target: slider });
.images {
  display: flex;
  flex-direction: row;
}

.img-container {
  flex: 1;
}

.container {
  border: thin solid grey;
}

.text-center {
  text-align: center;
}
<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">

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

  <div class="img-container" id="right">
    <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" />
    <h3 class="scale"></h3>
  </div>
</div>

<div class="container text-center">
  <input id="range-slider" type="range" min="40" max="100" value="50">
</div>

Upvotes: 1

LuisAFK
LuisAFK

Reputation: 957

This works for me. One is at 100% and the other at 40%. 

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 + "%";


        let newVal = (40 + (100 - parseInt(this.value))).toString();
        document.getElementById("rightDemo").innerHTML = newVal + "%";
        right.style.width = newVal + "%";


    }
* {
    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>

Upvotes: 2

Related Questions