'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?
- In your html, add
updateto<input />instead of<form />as input is what actually changes. - pass
thisintoupdate()function (update(this)).thishere refers to the element itself thatonchange()is called on, which is the<input /> - 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 |
