JSFiddle - React, Tailwind, and code Playground

HTML

<div id='over'>
    <div id='slides'>
        <ul id = "list">
             <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
            <li class='port_items'></li>
        </ul>
    </div>
    <div id='control'>
        <div id="stick">
            <div id="bar"></div>
        </div>
    </div>
</div>

CSS

*{
            margin:0px;
            padding:0px;
        }

        #slides{
            position:relative;
            width:100%;
            height:100px;
            border:1px solid black;
            overflow:hidden;
        }
        #list{
            width:5000px;
            position:absolute;
            top:0px;
            left:0px;
            cursor:pointer;
        }
        .port_items{
            list-style:none;
            float:left;
            height:100px;
            width:100px;
            background-color:blue;
        }
            .port_items:nth-child(2n+1){
                background-color:orange;
            }
            .port_items:first-child{
                background-color:green;
            }
            .port_items:last-child {
                background-color: red;
            }

        #stick{
            border-radius: 20px;
            width: 80%;
            height: 20px;
            background-color: grey;
            position: relative;
            left: 10%;
            top:20px;
        }
            #bar{
                position: absolute;
                width: 30px;
                height: 30px;
                border-radius: 30px;
                background-color: firebrick;
                left: 0px;
                top:-5px;
                cursor: pointer;
            }

JavaScript

document.getElementById('slides').onmousedown=function(e){
        var event = e || window.event;
        var stick = document.getElementById('stick');
        var list = document.getElementById('list');
        var listStart = (parseInt(list.style.left,10)||+list.style.left);
        var startPosX = event.pageX;
        var maxLeft = list.children.length*(document.getElementsByClassName('port_items')[0].offsetWidth)-document.body.offsetWidth;

        var bar = document.getElementById('bar');
        var coef =  (stick.offsetWidth-bar.offsetWidth)/maxLeft;

        document.onmousemove=function(e){
            var event = e || window.event;
            var newPosX = event.pageX;
            var newListPos = listStart + newPosX - startPosX;
            if (newListPos>0){
                list.style.left = -1 +'px';

            }
            else if (-1*newListPos>list.children.length*(document.getElementsByClassName('port_items')[0].offsetWidth)-document.body.offsetWidth ){

            }
            else{
                list.style.left= newListPos + 'px';
                bar.style.left = -1 * newListPos*coef+'px';
            }

        };
        document.onmouseup=function(e){
            document.onmousemove=document.getElementById('slides').onmouseup = null;
        }
    };

    document.getElementById('bar').onmousedown=function(e){
        var event = e || window.event;
        var self = this;
        var target = event.target || event.srcElement;
        var list = document.getElementById('list');
        var stick = document.getElementById('stick');
        var shiftX = target.getBoundingClientRect().left- event.pageX;
        var maxLeft = list.children.length*(document.getElementsByClassName('port_items')[0].offsetWidth)-document.body.offsetWidth;
        var coef = maxLeft / (stick.offsetWidth-self.offsetWidth);
        document.onmousemove=function(e) {
            var event = e || window.event;
            var newpos...