<input class="range" type="range" min="1" max="4">
<div class="sign"></div>
const changesSign = () => {
const rangeValue = document.querySelector('.range').value;
const sign = document.querySelector('.sign');
switch(rangeValue) {
case '1':
sign.innerText = 'Легко';
break;
case '2':
sign.innerText = 'Средне';
break;
case '3':
sign.innerText = 'Непросто';
break;
case '4':
sign.innerText = 'Сложно';
break;
}
}
document.querySelector('.range').addEventListener('change', () => changesSign());
document.addEventListener('DOMContentLoaded', () => changesSign());
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.