JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="cont">
  <div>Time</div>
  <div>Location</div>
  <input class="range-slider__range" type="range" value="0" min="0" max="100" step="12.5">
  <div class="ptitle">
    <div class="lb-header">Title</div>
    <div class="lb-subheader">Subtitle</div>
  </div>
    <div class="ptitle">
    <div class="lb-header">Title</div>
    <div class="lb-subheader">Subtitle</div>
  </div>
    <div class="ptitle">
    <div class="lb-header">Title</div>
    <div class="lb-subheader">Subtitle</div>
  </div>
  
</div>

CSS

.range-slider__range {
  width: 20em;
  -webkit-appearance: none;
  width: calc(100% - (73px));
  height: 10px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
  display:block;
}

.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
  background: #1abc9c;
}
.ptitle{display:inline-block;}
.lb-header{font-size:.8em;}
.lb-subheader{}