<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());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.