<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;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.