<div class="container">
  <div class="moji">😄</div>
  <div class="slider">
    <span>Yay!</span>
    <input type="range" value="0" min="0" max="10" step="1">
    <span>GTFO!!</span>
  </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
  width: 300px;
  margin: 2rem auto 0;
}
.moji {
  font-size: 8em;
  text-align: center;
}
input {
  width: 100%;
  margin: 0 10px;
}
.slider {
  display: flex;
  justify-content: space-between;
}
span {
  font-weight: bold;
  color: #5fcf80;
}
span:last-child {
  color: tomato;
}

const range = document.querySelector('input');
const div = document.querySelector('.moji');
const mojis = ['😄','🙂','😐','😑','☹️','😩','😠','😡','🤢','😤','💩'];

range.addEventListener('input', (e) => {
  let rangeValue = e.target.value;
  div.textContent = mojis[rangeValue];
});