'how to transfer the value of range in to span?

I want to use the "update" function that queries the current value of the slider, transfers it to Meter. Span "Value: [current value]". If the current value is at least 85, the indicator color should be set to #ffff00, otherwise the color is #808080.

 <form onchange="update();" oninput="update();">
            <input type="range" name="power" min="0" max="100" value="0">
            <br>
         <span>value:0</span>
        
        </form>
    
    <meter id="output" value="88" low="85" max="100" optimum="85">  </meter>
    <div class="indicator"></div>

    
    <script>
      function update() {
        
        let indicatorColors = ['#808080', 'ffff00'];
       // here I would have to access the indicator
        let indicator = 
       
    
    // here I would have to access indicatorColors
    indicator.style.backgroundColor =
    }
    </script> 
    
    <!-- css part -->
    <style>
    #output{
        height: 20px;
        width: 200px;
    
    }
    .indicator{
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: #808080;
        position: absolute;
        top: 40px;
        left: 210px;
    }
    </style>


Solution 1:[1]

How to get the value?

  1. In your html, add update to <input /> instead of <form /> as input is what actually changes.
  2. pass this into update() function (update(this)). this here refers to the element itself that onchange() is called on, which is the <input />
  3. Now, in your js code, you can access the input's value in update() function.

const valueCounter = document.querySelector(".value-counter");
const indicator = document.querySelector(".indicator");

function update(input) { // here the input parameter gets whatever u pass to update function in your html
  const value = input.value;
  valueCounter.textContent = `value:${value}`;

  indicator.style.backgroundColor = value >= 85 ? "#ffff00" : "#808080";
}
.indicator { /* just to view the changes */
  width: 50px;
  height: 50px;
}
<input type="range" name="power" min="0" max="100" value="0" onchange="update(this)">
<br>
<span class="value-counter">value:0</span>
<div class="indicator"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Moaaz Bhnas