I'm coding a simple volumen slider using a range input but when the @input event fires on the range input it also fires a click event on the parent div, I've already tried all the event modifiers and none of them worked. How can I avoid that from happening?

Also, I'm aware that assigning the @click to the mute icon would be the most logical thing to do, but due to frontend decisions beyond my control, that's not an option.

<script src="@3/dist/vue.global.js"></script>

<div id="app">
  <div @click="muteVolume" id="range-test">
    <p id="volume-level">Volume: {{Math.floor(volume * 100)}}%</p>
    <input
      @input="changeVolume"
      v-model.number="volume"
      type="range"
      min="0"
      max="1"
      step="0.01"
      id="volume-slider"
    />
    <p id="mute-btn">X</p>
  </div>
</div>

<script>
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      const volume = ref(0);
      const playerVolume = ref(0);
      const changeVolume = () => {
        playerVolume.value = volume.value;
      };
      const muteVolume = () => {
        volume.value = 0;
      };
      return { volume, changeVolume, muteVolume, playerVolume };
    }
  }).mount("#app");
</script>