title: Web audio volume change on two sliders
body: <p>I have asked this question previously but deleted it because it was the wrong code, i am currently working on a radio player and kinda new in Javascript, i need to add two volume sliders and when one goes up the other one also needs to go up with it. I tried checking and tried everything but nothing seems to help. What am i doing wrong?</p>
  <p>This is my current code (give it some time to load the radio player)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const audio = document.querySelector('#stream')
  const playPauseButton = document.querySelector('[name="play-pause"]')
  const playPauseButtonIcon = playPauseButton.querySelector('i.fas')
  const volumeControl = document.querySelector('[name="volume"]')
  const currentlyPlaying = document.querySelector('.currently-playing-title')
  
  
  let isPlaying = false
  let fetchInterval = null
  let currentVolume = 0.8
  
  audio.volume = currentVolume
  
  const fetchCurrentlyPlaying = () =&gt; fetch('...')
      .then(response =&gt; response.json())
      .then(data =&gt; currentlyPlaying.innerText = data.currentSong)
  
  
  volumeControl.addEventListener('input', () =&gt; {
      const volume = parseFloat(volumeControl.value)
  
      audio.volume = currentVolume = volume
      currentVolume = volume
  
  })
  
  
  playPauseButton.addEventListener('click', () =&gt; {
      if (isPlaying) {
          audio.pause()
  
          playPauseButtonIcon.classList.remove('fa-pause')
          playPauseButtonIcon.classList.add('fa-play')
  
          clearInterval(fetchInterval)
          currentlyPlaying.innerText = 'Er wordt geen nummer gedraaid'
      } else {
          audio.play()
  
          playPauseButtonIcon.classList.remove('fa-play')
          playPauseButtonIcon.classList.add('fa-pause')
  
          fetchCurrentlyPlaying()
          fetchInterval = setInterval(fetchCurrentlyPlaying, 3000)
      }
  
      isPlaying = !isPlaying
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.radio-player {
      margin: 30px;
  }
  .button {
      vertical-align: middle;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      background-color: #F59E0B;
      color: #fff;
      border-radius: 100%;
  }
  .play-pause-button {
      width: 70px;
      height: 70px;
      font-size: 25px;
      margin-right: 24px;
  }
  .mute-button {
      width: 30px;
      height: 30px;
      margin-right: 12px;
  }
  
  .player-controls {
      display: flex;
      align-items: center;
  }
  .currently-playing {
      display: flex;
      flex-direction: column;
      margin-bottom: 12px;
  }
  .volume-controls {
      display: flex;
      align-items: center;
  }
  
  .currently-playing-label {
      font-size: 12px;
      font-weight: 300;
  }
  .currently-playing-title {
      font-size: 22px;
  }
  
  .volume {
      -webkit-appearance: none;
      appearance: none;
      border: 1px solid #000;
      border-radius: 50px;
      overflow: hidden; /* This will help with styling the thumb */
  }
  
  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
  
      height: 15px;
      width: 15px;
  
      cursor: ew-resize;
      background: #F59E0B;
      box-shadow: -400px 0 0 390px #FDE68A;
      border-radius: 50%;
  }
  input[type="range"]::-moz-range-thumb {
      /* same as above */
  }
  input[type="range"]::-ms-thumb {
      /* same as above */
  }
  input[type="range"]:focus {
      border-radius: 50px;
      box-shadow: 0 0 15px -4px #F59E0B;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" /&gt;
      &lt;link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="radio-player"&gt;
      &lt;audio src="https://live.hostingbudget.nl:1045/stream" class="visually-hidden" id="stream"&gt;
          &lt;!-- More stuff here --&gt;
      &lt;/audio&gt;
  &lt;/div&gt;
  &lt;div class="player-controls"&gt;
      &lt;button name="play-pause" class="button play-pause-button" aria-label="Play/pause"&gt;
          &lt;i class="fas fa-play" aria-hidden&gt;&lt;/i&gt;
      &lt;/button&gt;
  
      &lt;div class="volume-and-title"&gt;
          &lt;div class="currently-playing" aria-label="Currently playing"&gt;
              &lt;span class="currently-playing-label"&gt;Now playing on Some Radio Station&lt;/span&gt;
              &lt;span class="currently-playing-title"&gt;Listen to Some Radio Station&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="volume-controls"&gt;
              &lt;input type="range" name="volume" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume"&gt;
              &lt;input type="range" name="volume2" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="js/radioaudio.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://dev.to/thormeier/let-s-build-a-web-radio-player-from-scratch-2poo" rel="nofollow noreferrer">Source code</a></p>