<div>
<span class="p_name">Strenght:</span>
<span class="p_value" id="str_value">340</span>
</div>
<input class="xxx" type="range" max="1000" value="340" id="str_input">
<div>
<span class="p_name">Agility:</span>
<span class="p_value" id="agl_value">760</span>
</div>
<input class="xxx" type="range" max="1000" value="760" id="agl_input">
<div>
<span class="p_name">Intellect:</span>
<span class="p_value" id="int_value">460</span>
</div>
<input class="xxx" type="range" max="1000" value="460" id="int_input">
<div>
<span class="p_name">Stamina:</span>
<span class="p_value" id="stm_value">340</span>
</div>
<input class="xxx" type="range" max="1000" value="340" id="stm_input">
<div>
<span class="p_name">Stealth:</span>
<span class="p_value" id="inv_value">1000</span>
</div>
<input class="xxx" type="range" max="1000" value="1000" id="inv_input">
<div>
<span class="p_name">Sapience:</span>
<span class="p_value xxx" id="sap_value">100</span>
</div>
<input class="xxx" type="range" max="1000" value="100" id="sap_input">
document.addEventListener('input', ({ target: t }) => {
if (t.classList.contains('xxx')) {
t.previousElementSibling.querySelector('.p_value').innerText = t.value;
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.