JSFiddle - React, Tailwind, and code Playground

by sthag

HTML

<input type="range" step="5">
<div class="flex">
  <p>0%</p>
  <p>|</p>
  <p>100%</p>
</div>
<div class="grid">
  <p>0%</p>
  <p>|</p>
  <p>|</p>
  <p>|</p>
  <p>100%</p>
</div>
<div id="position"><p id="dummy">|<br>###%</p></div>

SCSS

input {
  width: 100%;
  margin: 0;
}

div {
  margin-bottom: 8px;
  background-color: skyblue;
  
  p, 
  span {
    margin: 0 4px;
    background-color: rgba(0, 0, 0, .1);
    text-align: center;
  }

  p:first-child,
  span:first-of-type {
    text-align: start;
  }

  p:last-child,
  span:last-child {
    text-align: end;
  }
}

.flex {
  display: flex;
  justify-content: space-between;

  p {
    width: 10%;
    overflow: visible;
  }
}

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

#position {
  position: relative;
  width: 100%;
  height: 100%;
  
  span {
    position: absolute;
    top: 0;
    margin: 0;
  }
  
  span:last-child {
    transform: translateX(-100%);
  }
  
  span:not(:is(:first-of-type, :last-child)) {
    transform: translateX(-50%);
  }
}

#dummy {
  visibility: hidden;
}

JavaScript

const div = document.getElementById('position');
const s = 4;
let i = 0;

while (i <= 100) {
  console.log(i);
  let p = document.createElement('span');
  let x = 100;
  
  p.innerText = '|\n' + i;
  p.style.left = i + '%';
  div.appendChild(p);
  i += 100 / s;
}