I'm trying to change the icon in response to the volume control (range) element and can't make it work.

My html is:

<div  id="slider-container">
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span >Audio Volume</span>  
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span> 

    <i id="volume_low" ></i>
    <input type="range" min="0" max="2.5" value="0" step="0.1"  id="myRange">
    <i id="volume-up" ></i>

  </div>

... and it is shown correctly in a browser

My javascript is:

// for slider
const slider = document.querySelector("#myRange");

$("#myRange").on("input change", function() 
{ 
  const sliderValue = slider.value;
  if(sliderValue==0){
    console.log('zero', sliderValue );
    $('#volume_low').find("i").toggleClass("fa fa-volume-off fa-2x fa fa-volume-down fa-2x");
  }else
  {
    console.log('nonzero', sliderValue);
    $('#volume_low').find("i").toggleClass("fa fa-volume-down fa-2x fa fa-volume-off fa-2x");
  }

});

// end of for slider

Doesn't work (icon not changing in the leftmost position as required), not showing any errors

CodePudding user response：

You did mistake targeting the i.

No need .find("i") because you already did it with $('#volume_low')

// for slider
const slider = document.querySelector("#myRange");

$("#myRange").on("input change", function() { 
  const sliderValue = slider.value;
  if (sliderValue == 0) {
    console.log('zero', sliderValue );
    $('#volume_low').removeClass('fa-volume-down').addClass("fa-volume-off");
  } else {
    console.log('nonzero', sliderValue);
    $('#volume_low').removeClass('fa-volume-off').addClass("fa-volume-down");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div  id="slider-container">
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span >Audio Volume</span>  
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span> 

    <i id="volume_low" ></i>
    <input type="range" min="0" max="2.5" value="0" step="0.1"  id="myRange">
    <i id="volume-up" ></i>

  </div>

CodePudding user response：

In the example below, three different icon changes are provided according to the sound status. Class styles previously applied to the <i> element are removed and new class styles are assigned.

/* Global Variable; It is initialized using the context of the class implemented in the <i> element. */
let beforeClass = "off";

$("#myRange").on("input change", function() { 
  const sliderValue = $("#myRange").val();
   
  /* previously applied class styles are removed */
  $('#volume_low').removeClass(`fa fa-volume-${beforeClass} fa-2x`);
  
  if(sliderValue == 0)  {
    $('#volume_low').addClass("fa fa-volume-off fa-2x");
    beforeClass = "off";
  }
  else if(sliderValue > 0 && sliderValue <= 1) {
    $('#volume_low').addClass("fa fa-volume-down fa-2x");
    beforeClass = "down";
  }
  else if(sliderValue > 1) {
    $('#volume_low').addClass("fa fa-volume-up fa-2x");
    beforeClass = "up";
  }
  
  console.clear();
  console.log(`Value: ${sliderValue}`);
});

i {
  margin-left: 40px;
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div  id="slider-container">
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span >Audio Volume</span>  
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span><br><br>
    <i id="volume_low" ></i>
    <input type="range" min="0" max="2.5" value="0" step="0.1"  id="myRange">
    <i id="volume-up" ></i>
</div>