Hi folks,
I noticed at this section: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#Sliders
The instructions given are:
In this example we add an empty
<span>
element, in which we will write the current value of the slider, updating it as it is changed.
However, it’s followed by this HTML using <output>
instead of <span>
:
<label for="beans">How many beans can you eat?</label>
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
<output class="beancount"></output>
with this JavaScript:
var beans = document.querySelector('#beans');
var count = document.querySelector('.beancount');
count.textContent = beans.value;
beans.oninput = function() {
count.textContent = beans.value;
}
The live example does use <span>
.
<label for="beans">How many beans can you eat?</label>
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
<span class="beancount"></span>
After looking up <output>
on MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) it seems like, if JavaScript is required, it would be simpler for inexperienced developers to use the <output>
element in in conjunction with the oninput
attribute (I couldn’t find MDN documentation but here it is on w3schools: https://www.w3schools.com/tags/ev_oninput.asp )
Example:
<label for="beans">How many beans can you eat?</label>
<input oninput="beancount.value=parseInt(beans.value)" type="range" name="beans" id="beans" min="0" max="500" step="10">
<output name="beancount">250</output>
Tested and works - and pretty easy/nifty for a newbie like me.