JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ngrs-runner-wrapper">
    <div class="ngrs-runner">
        <div class="ngrs-handle ngrs-handle-min" style="left: 10px;"><i></i></div>
        <div class="ngrs-handle ngrs-handle-max" style="left: 200px;"><i></i></div>
        <div class="ngrs-join cs-bg-10" style="left: 10%; right: 20%;"></div>
    </div>
</div>

CSS

.ngrs-runner-wrapper {
  height: 14px;
  padding-top: 7px;
}
.ngrs-runner {
    position: relative;
    height: 3px;
    background: #dbdbdb;
    box-shadow: inset 0 2px 2px -2px rgba(0,0,0, .5);
    margin: 7px 0;
}

.ngrs-handle {
    border-radius: 50% !important;
    background: #7e4a8d !important;
    box-shadow: none;
}

.ngrs-handle {
    position: absolute;
    z-index: 2;
    height: 14px;
    width: 14px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgba(0,0,0, .5);
}

JavaScript

var bar = document.querySelector('.ngrs-runner-wrapper');
var minHandle = document.querySelector('.ngrs-handle-min');
var maxHandle = document.querySelector('.ngrs-handle-max');
var firstClick = true;

bar.onclick = function(e) {
	if(firstClick) {
		minHandle.style.left = Math.min(e.offsetX, parseInt(maxHandle.style.left)) + 'px';
	} else {
		maxHandle.style.left = Math.max(e.offsetX, parseInt(minHandle.style.left)) + 'px';
	}
	firstClick = !firstClick;
};