JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <!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>
  <meta charset="utf-8" />

</head>

<body>
  <input type="range" name="rangeInput" min="20" max="40" value="20" id="height">
</body>

</html>

JavaScript

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

function setup() {
  createCanvas(800, 500);
}

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;
  }
}
var slider = document.getElementById('height')
slider.addEventListener('change', function(){ changeHeight(this.value)})