JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<div>
<input type="range" min="00" max="1000">
<div id="part1">
987654321
</div>
<div id="part2">
1234567 dsfjlsljfsdflkjslkfkj 
</div>
</div>

CSS

body > div {
  position: relative;
  width: 95vw;
  height: 100px;
  border: 3px solid black;
  margin: auto;
  display: flex;
  --slider-width: 16px;
  --slider-position: 50%;
}
input[type=range] {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  margin: 0;
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #66e;
  height: var(--slider-height);
  width: var(--slider-width);
}

#part1 {
  background-color: #faa;
  width: calc((100% - var(--slider-width)) * var(--slider-position));
  text-align: right;
}
#part2 {
  flex: 1 1 0;
  margin-left: var(--slider-width);
  background-color: #afa;
  overflow: hidden;
}

JavaScript

let slider = document.querySelector("input[type=range]");
slider.style.setProperty("--slider-height", slider.clientHeight + "px");

slider.addEventListener("input", adjustSlider);
adjustSlider();

function adjustSlider(event) {
   if (slider.value < 100) slider.value = 100;
   if (slider.value > 900) slider.value = 900;
   slider.parentElement.style.setProperty("--slider-position", slider.value/1000);
}