JSFiddle - React, Tailwind, and code Playground

HTML

<div slider id="slider-distance">
<div>
<div inverse-left style="width:70%;"></div>
<div inverse-right style="width:70%;"></div>
<div range style="left:0%;right:0%;"></div>
<span thumb style="left:0%;"></span>
<span thumb style="left:100%;"></span>
<div sign style="left:0%;">
  <span id="value">0</span>
</div>
<div sign style="left:100%;">
  <span id="value">100</span>
</div>
</div>

<input type="range" name="info[age1]" value="0" max="100" min="0" step="1" oninput="
this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
let value = (this.value/parseInt(this.max))*100
var children = this.parentNode.childNodes[1].childNodes;
children[1].style.width=value+'%';
children[5].style.left=value+'%';
children[7].style.left=value+'%';children[11].style.left=value+'%';
children[11].childNodes[1].innerHTML=this.value;" />

<input type="range" name="info[age2]" value="100" max="100" min="0" step="1" oninput="
this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
let value = (this.value/parseInt(this.max))*100
var children = this.parentNode.childNodes[1].childNodes;
children[3].style.width=(100-value)+'%';
children[5].style.right=(100-value)+'%';
children[9].style.left=value+'%';children[13].style.left=value+'%';
children[13].childNodes[1].innerHTML=this.value;" />
</div>

CSS

[slider] {
   width: 300px;
   position: relative;
   height: 5px;
   margin: 45px 0 10px 0;
 }

 [slider] > div {
   position: absolute;
   left: 13px;
   right: 15px;
   height: 5px;
 }
 [slider] > div > [inverse-left] {
   position: absolute;
   left: 0;
   height: 5px;
   border-radius: 10px;
   background-color: #CCC;
   margin: 0 7px;
 }

 [slider] > div > [inverse-right] {
   position: absolute;
   right: 0;
   height: 5px;
   border-radius: 10px;
   background-color: #CCC;
   margin: 0 7px;
 }


 [slider] > div > [range] {
   position: absolute;
   left: 0;
   height: 5px;
   border-radius: 14px;
   background-color: #1480FF;
 }

 [slider] > div > [thumb] {
   position: absolute;
   top: -7px;
   z-index: 2;
   height: 20px;
   width: 20px;
   text-align: left;
   margin-left: -11px;
   cursor: pointer;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
   background-color: #FFF;
   border-radius: 50%;
   outline: none;
 }

 [slider] > input[type=range] {
   position: absolute;
   pointer-events: none;
   -webkit-appearance: none;
   z-index: 3;
   height: 14px;
   top: -2px;
   width: 100%;
   opacity: 0;
 }

 div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
   background: transparent;
   border: transparent;
 }

 div[slider] > input[type=range]:focus {
   outline: none;
 }

 div[slider] > input[type=range]::-webkit-slider-thumb {
   pointer-events: all;
   width: 28px;
   height: 28px;
   border-radius: 0px;
   border: 0 none;
   background: #1480FF;
   -webkit-appearance: none;
 }

 div[slider] > input[type=range]::-ms-fill-lower {
   background: transparent;
   border: 0 none;
 }

 div[slider] > input[type=range]::-ms-fill-upper {
   background: transparent;
   border: 0 none;
 }

 div[slider] > input[type=range]::-ms-tooltip {
   display: none;
 }

 [slider] > div > [sign] {
   opacity: 0;
   position: absolute;
   margin-left: -11px;
   top: -39px;
   z-index:3;
   background-color: #1480FF;
   color: #fff;
   width: 28px;
   height:...