JSFiddle - React, Tailwind, and code Playground

by beradrian

HTML

<div id="a" class="slider">
    <ul id="b" class="tabs">
  		<li>Hello</li>
        <li>world</li>
        <li>Hello</li>
        <li>world</li>
    </ul>
</div>

CSS

#b {
	border-bottom: solid 2px red;
    height: 30px;
    left: -30px;
	position: relative;
}

#b LI {
    border: solid 1px green;
    float: left;
    height: 90%;
    padding: 0 30px;
    position: relative;
}

#a {
    border: solid 1px black;
    overflow: hidden;
    padding: 3px;
    width: 200px;
}

JavaScript

var pos = 0;
var pressed = false;

$("#a").on("mousedown", function(event) {
    pos = event.pageX;
    pressed = true;
    console.log("start:" + pos);
    //event.preventDefault();
});

$("#a").on("mousemove mouseup", function(event) {
    if (!pressed) return;
    console.log("new pos:" + event.pageX);
    var delta = event.pageX - pos;
    console.log("delta:" + delta);
    $("#b").css("left", "+=" + delta);
    console.log("left:" + $("#b").css("left"));
    pos = event.pageX;
    if (event.type == "mouseup")
    	pressed = false;
    //event.preventDefault();
});