JSFiddle - React, Tailwind, and code Playground

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

HTML

<div id="foo">
    <div id="ball"></div>
</div>

CSS

#foo {
    height:20px;
    background:#ccc;
}
#ball {
    width:60px;
    height:20px;
    background:#c55;
}

JavaScript

function mouseV() {

    $('#foo').mousemove(function (e) {
        var ex = e.pageX;
        $('#ball').css({
            'width': ex + 'px'
        });
    });

};
$('#foo').mousedown(function (e) {
    var ex = e.pageX;
    $('#ball').css({
        'width': ex + 'px'
    });
    mouseV();
}).mouseup(function () {
    $('#foo').unbind('mousemove');
});