jQuery addClass example

Change class name on click in jQuery

by Kunal Virk

HTML

<div class="dragger">
        <div class="dragger__loaded"></div>
        <div class="dragger__thumb"></div>
    </div>

CSS

.dragger {
            width: 500px;
            height: 10px;
            display: inline-block;
            margin: 0; 
            padding: 0;
            background-color: #e1e1e1;
            position: relative;
        }
        .dragger > .dragger__loaded {
            width: 50px; 
            display: inline-block;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
        }
        .dragger > .dragger__thumb {
            width: 10px;
            height: 10px;
            background-color: chartreuse;
            position: absolute;
            top: 0;
        }

JavaScript

$('.dragger').on("mousedown", function(e) {
        var thumb    = $('.dragger__thumb'),
            progress = $('.dragger__loaded');

            var posX = e.pageX - $('.dragger__loaded').offset().left;
            posX = Math.min(Math.max(0, posX), $('.dragger').width())
            $('.dragger__loaded').width(posX + "px");
            $('.dragger__thumb').css("left", (posX - $('.dragger__thumb').width()) + "px");

        $(document).on('mousemove', moveHandler);
        $(document).on('mouseup', stopHandler);
    })

    function moveHandler(e) {
        var posX = e.pageX - $('.dragger__loaded').offset().left;
        posX = Math.min(Math.max(0, posX), $('.dragger').width());

        var percent = posX / $('.dragger').width() * 100;

        console.log("Percentage ::: ", percent);

        $('.dragger__loaded').width(posX + "px");
        $('.dragger__thumb').css("left", (posX - $('.dragger__thumb').width()) + "px");
    }

    function stopHandler(e) {
        $(document).off('mousemove', moveHandler);
        $(document).off('mouseup', stopHandler);
    }