Jack King Jack King - 3 months ago 10
HTML Question

change two range together - javascript

I have three range .. one range change width second range change height .. i want third range change width and height together with same value(change size).



function x11() {
var x1 = document.getElementById("m1").value;
var mm = document.getElementById("mm").style;
mm.width = x1 + "px";
}

function x22() {
var x1 = document.getElementById("m2").value;
var mm = document.getElementById("mm").style;
mm.height = x1 + "px";
}

1<input type="range" min="0" max="200" value="100" style="width:100%;" oninput="x11(this.value)" id="m1">

2<input type="range" min="0" max="200" value="40" step="0.5" style="width:100%;" oninput="x22(this.value)" id="m2">
3
<input type="range" style="width:100%;" id="m3">

<p id="mm" style="width: 150px; height:40px; background-color:red;"></p>




Answer

If you want to change the width and height proportionally, you need to save their values somewhere. That way you have a point of reference to work from. Then it's just a matter of adding to those points of reference.

var width = 100;
var height = 40;
var extra = 0;

// Actually use the passed in value
function x11(x1) {
  var mm = document.getElementById("mm").style;
  width = Number(x1);
  mm.width = (width + extra) + "px";
}

function x22(x1) {
  var mm = document.getElementById("mm").style;
  height = Number(x1);
  mm.height = (height + extra) + "px";
}

function x33(x1) {
  // Change the size proportionally
  var mm = document.getElementById("mm").style;
  extra = Number(x1);
  mm.width = (width + extra) + 'px';
  mm.height = (height + extra) + 'px';
}
1<input type="range" min="0" max="200" value="100" style="width:100%;" oninput="x11(this.value)" id="m1">
   
2<input type="range" min="0" max="200" value="40" step="0.5" style="width:100%;" oninput="x22(this.value)" id="m2">
    3
<input type="range" style="width:100%;" oninput="x33(this.value)" min="0" max="200" value="0" id="m3">

<p id="mm" style="width: 100px; height:40px;  background-color:red;"></p>

The above will work but personally I'd clean it up a bit.

var width = 100;
var height = 40;
var margin = 0;

function setWidth(w) {
  width = Number(w);
  drawBox();
}

function setHeight(h) {
  height = Number(h);
  drawBox();
}

function setMargin(m) {
  margin = Number(m);
  drawBox();
}

// Move box drawing to one function
function drawBox() {
  var box = document.getElementById('box').style;
  box.width = (width + margin) + 'px';
  box.height = (height + margin) + 'px';
}

// Avoid having to set the initial size in CSS
drawBox();
/* Separate CSS from HTML */
input {
  width: 100%;
}

p {
  background-color: red;
}
<!-- We don't need the IDs since we're getting the value directly -->
<!-- We're also going to use more descriptive function names -->
1 <input type="range" min="0" max="200" value="100" oninput="setWidth(this.value)">
   
2 <input type="range" min="0" max="200" value="40" step="0.5" oninput="setHeight(this.value)">
    
3 <input type="range" min="0" max="200" value="0" oninput="setMargin(this.value)">

<p id="box"></p>

Comments