JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="plVoF">
    <div class="plVoPrBaFo" onmousedown="dragOBJ(document.getElementById('plVoPrBaScIc'),event);" id="plVoPrBaFo">
        <div id="plVoPrBaSc" class="plVoPrBaSc" style="width: 50%;"></div>
        <div id="plVoPrBaScIc" class="plVoPrBaScIc" style="top: -1px; left: 45px;">
            <div id="plVoPrBaScIn" class="plVoPrBaScIn">50%</div>
        </div>
    </div>
</div>

CSS

.plVoF {
    display: inline-block;
    margin: 12px 0;
    position: relative;
    vertical-align: top;
    height: 26px;
    width: 162px;
}
.plVoPrBaFo {
    background: #BEBEBE;
    border: 1px solid #555555;
    border-color: #222222 #444444 #555555;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: block;
    left: 30px;
    position: absolute;
    top: 8px;
    height: 8px;
    width: 100px;
}
.plVoPrBaSc {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(215, 215, 215) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(255, 255, 255)), color-stop(100%, rgb(215, 215, 215)));
    background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(215, 215, 215) 100%);
    background: -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(215, 215, 215) 100%);
    background: -ms-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(215, 215, 215) 100%);
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(215, 215, 215) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d7d7d7', GradientType=0);
    border-top: 1px solid #A0A0A0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 -10px 15px -10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 -10px 15px -10px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -10px 15px -10px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 0px;
    height: 7px;
}
.plVoPrBaScIc {
    background: rgb(255, 255, 255);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.25), 0 3px 5px -2px...

JavaScript

function agent(v) {
    return (Math.max(navigator.userAgent.toLowerCase().indexOf(v), 0));
}

function xy(e, v) {
    return (v ? (agent('msie') ? e.clientY + document.body.scrollTop : e.pageY) : (agent('msie') ? e.clientX + document.body.scrollTop : e.pageX));
}

function dragOBJ(d, e) {
    var rpv = document.getElementById("plVoPrBaFo").getBoundingClientRect();
    if (!e) e = window.event;
    if ((e.clientX - rpv.left) > 100) return;
    d.style.left = (((e.clientX - rpv.left) - 5) + 'px');
    document.getElementById("plVoPrBaSc").style.width = (e.clientX - rpv.left) + "%";
    document.getElementById("plVoPrBaScIn").innerHTML = (e.clientX - rpv.left) + "%";
    playerVolumeHold = e.clientX - rpv.left;

    function drag(e) {
        flag = 0;
        if (!stop && (xy(e) + oX - eX) > -6 && (xy(e) + oX - eX) < 96) {
            d.style.left = ((tY = xy(e) + oX - eX) + 'px');
            document.getElementById("plVoPrBaSc").style.width = (xy(e) + oX - eX) + 5 + "%";
            document.getElementById("plVoPrBaScIn").innerHTML = (xy(e) + oX - eX) + 5 + "%";
            playerVolumeHold = xy(e) + oX - eX + 5;
        }
    }

    var oX = parseInt(d.style.left),
        oY = parseInt(d.style.top),
        eX = xy(e),
        eY = xy(e, 1),
        tX, tY, stop;

    document.onmousemove = drag;
    document.onmouseup = function () {
        stop = 1;
        document.onmousemove = '';
        document.onmouseup = '';
    };

};