JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.ngrs-runner {
    position: relative;
    height: 3px;
    background: #dbdbdb;
    box-shadow: inset 0 2px 2px -2px rgba(0,0,0, .5);
    /* margin: 7px 0; */
    margin: 7px 14px 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);
}