public/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Volume</title>
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-small.png">
  <link rel="manifest" href="/manifest.json">
  <link rel="mask-icon" href="/safari-pinned.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#00aba9">
  <meta name="theme-color" content="#418598">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <style>
    html, body { margin: 0; background: #202020; color: #efefef; }
    body { overflow: hidden; }
    .container { margin: 0 auto; display: flex; flex-direction: column; max-width: 800px; height: 100vh; }
    .input-container { transform: rotate(270deg); display: flex; }
    h1 { text-align: center; }
    input { width: 400px; }

    @media (max-width: 700px) {
      .input-container { flex-grow: 1; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Control PC volume</h1>
    <div class="input-container">
      <input type="range" min="0" max="1" step="0.02" value="0.5" onchange="onInputChange();" id="volume-change-input"/>
    </div>
  </div>
  <script>
    function onInputChange() {
      var newValue = document.getElementById("volume-change-input").value;
      fetch("/api/setvolume", {
        method: "post",
        headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
        //make sure to serialize your JSON body
        body: JSON.stringify({ volume: newValue })
      }).then( (response) => {
        //do something awesome that makes the world a better place
      });
    }
  </script>
</body>
</html>