JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider_wrapper">
        <span class="nvgt" id="prev"></span> 
        <input id="range" type="range" min="0" max="100" step="1"/>
         <span class="nvgt" id="next"></span>
    </div>

CSS

.slider_wrapper{
  width: 400px;
  height: 50px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  background:rgba(0,255,0,0.5);
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Not implemented yet */
    /*-o-user-select: none;*/
   /* user-select: none;   */
}
    
.nvgt{
	position:absolute;
	top: 0px;
	height: 50px;
	width: 20%;
	opacity: 0.25;
    z-index: 100;
}

  
#prev{
	background: #000;
	left: 0px;
}
#next{
	background: #000;
	right: 0px;
}   
       
    
#range { 
  width:98%;
  position: absolute;
  height: 92%;
  background:rgba(0,0,255,0.40);
       
} 
    
input[type=range],
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  margin:0; padding:0; border:0;
  }
input[type=range] {
  display:inline-block!important;
  vertical-align:middle;
  height:12px;
  padding:0 2px;
  border:2px solid transparent;
  background:rgba(0,0,0,0.15);
  min-width:100px;
  overflow:hidden;
  cursor:pointer;
  }
  input[type=range]::-ms-fill-upper { background:transparent; }
  input[type=range]::-ms-fill-lower { background:rgba(0,0,0,0.15); }

/* Browser thingies */
input[type=range]::-moz-range-track { opacity:0; }
input[type=range]::-ms-track        { opacity:0; }
input[type=range]::-ms-tooltip      { display:none; }

/* For whatever reason, these need to be defined
 * on their own so dont group them */
input[type=range]::-webkit-slider-thumb {
  background:rgba(0,0,0,0);
  height:12px; width:20px;
  border-radius:3px;
  cursor:ew-resize;
  box-shadow:rgba(0,0,0,0) -1200px 0 0 1200px;
  }
input[type=range]::-ms-thumb {
  margin:0;padding:0;border:0;
  background:rgba(0,0,0,0);
  height:12px; width:20px;
  border-radius:3px;
  cursor:ew-resize;
  box-shadow:rgba(0,0,0,0) -1200px 0 0 1200px;
  }
input[type=range]::-moz-range-thumb {
  margin:0;padding:0;border:0;
  background:rgba(0,0,0,0);
  height:12px; width:20px;
 ...