Metal-2.0/alpha_sweep/test_slider.html

<!DOCTYPE html>
<html>
<head>
<title>alpha swept</title>
<style>
body {
    height: 100%;
    margin: 0 auto;
  }
canvas {
    height: 800px;
    width: 1400px;
    /* border: 1px solid black;  */
  }
input[type="range"] {
  width:450px;
}
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <h1>&#945  sweep</h1>
    <h2> Frequencies </h2>
    <div style="width: 100%; float:left;">
        <canvas id="canvas_freqs"></canvas>
        <br>
        <input style="width: 80%;" id="input_freqs" type="range" min="0" max="99" value="0" orient="horizontal" oninput="document.getElementById('output_freqs').value = this.value;" />
        <div><output id="output_freqs">0</output></div>
    </div>
    
    <br>
    
    <h2> Multifrequency </h2>
    <div style="width: 100%; float:left;">
        <canvas id="canvas_multi"></canvas>
        <br>
        <input style="width: 80%;" id="input_multi" type="range" min="0" max="99" value="0" orient="horizontal" oninput="document.getElementById('output_multi').value = this.value;" />
        <div><output id="output_multi">0</output></div>
    </div>

</body>
<script src="./slider.js"></script>

</html>