同时更改范围滑块和输入框的值

Question

我想要一个输入框和一个允许我更改三角形高度的滑块。当我移动范围滑块时，输入框中的值会发生变化，但是，如何在输入框中输入数字并更改滑块的值。非常感谢。

//default ramp size parameters
let rampHeight = 200;
let rampLength = 150;

function setup() {
  createCanvas(800, 500);
  var slider = document.getElementById('height')
slider.addEventListener('change', function(){ changeHeight(this.value)})

  $('#height').on('input',function () {

  var newVal = $(this).val();

  $("#heightInput").val(newVal);
});
$('#heightInput').on('input', function(){
  //console.log($(this).val())
  $('#height').val($(this).val())
});
}

function draw() {
  background(220);
  fill(150);
  triangle(700, rampHeight, 700, 400, rampLength, 400);
}

function changeHeight(height) {
  rampHeight = 500 - height * 10;

  if (height >= 20 && height <= 40) {
    return rampHeight;
  } else if (height > 40) {
    return rampHeight = 100;
  } else if (height < 20) {
    return rampHeight = 300;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input id="height" type="range" min="20" max="40" value="30">
    <div class="input-amount">
      <input id="heightInput" name="price" value="30">
    </div>
  </body>
</html>

顺便说一句，我正在使用p5.js...

Answer 1

这就是您在评论中想要的在 vanilla JS 中执行此操作的方式。我只是在 input

事件中使用 addEventListener 方法

//default ramp size parameters
let rampHeight = 200;
let rampLength = 150;

function setup() {
  //createCanvas(800, 500);
  var slider = document.getElementById('height');
  var input = document.getElementById('heightInput');
  
  slider.addEventListener('input', function(){ 
    input.value = changeHeight(this.value);
  });
  input.addEventListener('input', function(){ 
    slider.value = this.value;
  });
}

function draw() {
  background(220);
  fill(150);
  triangle(700, rampHeight, 700, 400, rampLength, 400);
}

function changeHeight(height) {
  rampHeight = 500 - height * 10;

  if (height >= 20 && height <= 40) {
    return rampHeight;
  } else if (height > 40) {
    return rampHeight = 100;
  } else if (height < 20) {
    return rampHeight = 300;
  }
}

setup();

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input id="height" type="range" min="20" max="40" value="30">
    <div class="input-amount">
      <input id="heightInput" name="price" value="30">
    </div>
  </body>
</html>

同时更改范围滑块和输入框的值

Changing the value of the range slider and input box at the same time

html

javascript

css

simulation

physics