how would I make a volume slider in html?

Question

I'm currently trying to make a volume slider for my site, due to the fact i know very, very limited js - i cant figure out how.

code below

      var audio = new Audio("audio.mp3");
      audio.volume = 1;
      audio.loop = true;
      document.onclick = function() {
        audio.play();
      }

i tried using ids, classes and more still didn't work for me

Answer 1

You can get the element and modify its audio property:

<input type="range" id="vol" name="vol" min="0" max="100">

<audio id="audio" src="your-audio-file.mp3"></audio>

<script>
    let audioVolume = document.getElementById('vol');
    let audio = document.getElementById('audio');

    audioVolume.addEventListener('input', function() {
        audio.volume = +audioVolume.value / 100;
    });
</script>

<!-- Angular version -->

<input (input)="audio.volume = +audioVolume.value / 100" #audioVolume type="range" id="vol" name="vol" min="0" max="100">

<audio #audio src="your-audio-file.mp3"></audio>

Answer 2

Today I was designing a web video player and I designed the following volume slider. I used material theme. Here is my code: You can customise it for yourself.

/*
            We set the direction CSS property of the range input to rtl to support right-to-left direction.
            Additionally, we adjust the calculation for the progress percentage to reflect the reversed direction.
            The linear gradient is also updated to accommodate the RTL direction.
           */

          const inputRange = document.querySelector('.custom-input');

          inputRange.addEventListener('input', function () {
              const progress = (inputRange.value - inputRange.min) / (inputRange.max - inputRange.min) * 100;
              inputRange.style.background = `linear-gradient(to top, var(--md-sys-color-on-surface-variant) 0%, var(--md-sys-color-on-surface-variant) ${progress}%, var(--md-sys-color-surface-variant) ${progress}%, var(--md-sys-color-surface-variant) 100%)`;
          });

.custom-input {
              width: 100%;
              height: 4px;
              width: 4px;
              height: 100%;
              background: var(--md-sys-color-surface-variant);
              border-radius: 5px;

              writing-mode: vertical-lr;
              -webkit-appearance: slider-vertical;
          }

          .custom-input::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              width: 14px;
              height: 14px;
              background: var(--md-sys-color-on-surface-variant) !important;
              border-radius: 50%;
              cursor: pointer;
          }

          .custom-input::-moz-range-thumb {
              width: 14px;
              height: 14px;
              background: var(--md-sys-color-on-surface-variant) !important;
              border-radius: 50%;
              cursor: pointer;
          }

      <div style="position: relative;width: fit-content;height: 110px">
        <input class="custom-input" type="range" min="0" max="100" step="any" value="0">
      </div>

Answer 3

Something fairly simple could work for you. You could create a range input into your html file and then use that specific range to create a volume slider

Volume slider in html:

<input type="range" id="volume-slider">

You could then use that slider in js and convert its value to change your volume like so:

let volume = document.getElementById('volume-slider');
volume.addEventListener("change", function(e) {
    audio.volume = e.currentTarget.value / 100;
})

Source from a similar answer: Js Audio Volume Slider