JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress">
          <div class="vjs-progress-holder vjs-slider" >

          </div>
        <div id="progress_box"> <span id="play_progress"></span> </div>
      </div>

CSS

#progress {
	cursor: pointer;
	width: 42%;
	float: left; padding-top:5px;
}
#progress #progress_box {
	float: left;
	width: 100%;
	height: 14px;
	background: rgba(110,116,126,1);
	background: -moz-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(110,116,126,1)), color-stop(23%, rgba(110,116,126,1)), color-stop(50%, rgba(110,116,126,1)), color-stop(50%, rgba(87,94,106,1)), color-stop(100%, rgba(87,94,106,1)));
	background: -webkit-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
	background: -o-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
	background: -ms-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
	background: linear-gradient(to bottom, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e747e', endColorstr='#575e6a', GradientType=0 );
	margin: 2px 0 0 5px;
	xpadding: 2px;
	overflow: hidden;
}

JavaScript

var rangesliderContainer = document.createElement('div'),
            selectionBar = document.createElement('div'),
            leftHandler = document.createElement('div'),
            rightHandler = document.createElement('div');

 rangesliderContainer.style.position = 'relative';
        rangesliderContainer.style.top = '-1em';
        rangesliderContainer.style.height = '100%';
        rangesliderContainer.id='rangeSlider';
        rangesliderContainer.setAttribute('data-myval','0');

        selectionBar.style.height = '60%';
        selectionBar.style.position = 'absolute';
        selectionBar.style.left = '0%';
        selectionBar.style.right = '0%';
        selectionBar.style.backgroundColor = '#f3752b';
        selectionBar.style.opacity = '0.8';

        leftHandler.className = 'left';
        leftHandler.style.position = 'relative';
        leftHandler.style.width = '0.3em';
        leftHandler.style.height = '100%';
        leftHandler.style.backgroundColor = '#fff';
        //leftHandler.style.left = '-0.5em';
        leftHandler.style.height='2em';
		 leftHandler.style.backgroundColor = '#f3752b';

        rightHandler.className = 'right';
        rightHandler.style.position = 'absolute';
        rightHandler.style.width = '0.3em';
        rightHandler.style.height = '100%';
        rightHandler.style.backgroundColor = '#fff';
        rightHandler.style.right = '-0.5em';
        rightHandler.style.top = '0';
        rightHandler.style.height='2em';
 		rightHandler.style.backgroundColor = '#f3752b';

	 rangesliderContainer.appendChild(selectionBar);
        selectionBar.appendChild(leftHandler);
        selectionBar.appendChild(rightHandler);

$('.vjs-progress-holder').append(rangesliderContainer);

 var onMouseMove = function (event) {
                var totalWidth = rangesliderContainer.offsetWidth;
                var leftEdge = rangesliderContainer.getBoundingClientRect().left;
                var position = event.pageX;
                
      ...