<div class="range-wrapper">
  <input type="range" min="1" max="10" step="1" />
  <div class="icons">
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
    <span>😊</span>
  </div>
</div>

.range-wrapper {
  max-width: 400px;

  input[type="range"] {
    display: block;
    width: 100%;
    margin: 0;
  }
  
  .icons {
    display: flex;
    justify-content: space-between;
    margin: 0 -0.5em;
    text-align: center;
  }
}