JSFiddle - React, Tailwind, and code Playground

HTML

<div class="entry-field">
  <div class="slider-text">
    Higher than: {value}
  </div>
  <div class="inline slider">
    <span class="limit">0</span>
    <input type="range" min="0" max="100" value={value} step="5" />
    <span class="limit">100</span>
    <ul class="colors">
      <li class="green">Green</li>
      <li class="yellow">Yellow</li>
      <li class="orange">Orange</li>
      <li class="red">Red</li>
    </ul>
  </div>
</div>

CSS

.slider {
  width: 90%;
  background: #444;
  margin: 20px 0;
  padding: 20px;
  position: relative;
}

.slider input[type="range"] {
  width: 85%;
}

.slider .limit {
  color: #fff;
  position: absolute;
  top: 20px;
}

.slider .limit:first-child {
  left: 10px;
}

.slider .limit:last-child {
  right: 10px;
}

.slider .colors {
  list-style-type: none;
}

.slider .colors li {
  display: inline-block;
  width: 24%;
}

.slider .colors .green {
  color: green;
}

.slider .colors .yellow {
  color: yellow;
}

.slider .colors .orange {
  color: orange;
}

.slider .colors .red {
  color: red;
}