JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<div class="range">
    <div class="strip">
           <div class="bar"></div>
            <div class=" dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
    </div>
</div>

<div class="pic">
        <img class="woman" src="http://www.tomer.ru/group/images/changes-woman.png" alt="">
</div>

CSS

*{
    margin:0;
    padding:0;
}
.range{
    
}
.strip{
    margin:20px 0 0 0;    
    width:100%;
    height:15px;
    background-color:silver;
    position:relative;
}
.dot{
    width:20px;
    height:20px;
    border-radius:20px;
    position:absolute;
    top:-2.5px;
    background-color:grey;
}
    .dot1{
        left:0;    
    }
.dot2{
    left:-webkit-calc(50% - 10px);
    left:-moz-calc(50% + 10px);
    left:calc(50% - 10px);
}
.dot3{
    right:0;
}
.bar{
    height:45px;
    width:20px;   
    position:absolute;
    left:0;
    top:-15px;
    background-color:darkred;
    z-index:2;
    cursor:pointer;
}
.pic{
    
       
   position:relative;
margin:200px 0 0 0;

}
.woman{
    position:absolute;
    left:0;
    top:0;
}

JavaScript

$('.bar').on('mousedown',function(e){
    var that = $(this);
    var posX = e.pageX;
    var barPosX = that.position().left;
    var windowWidth = window.innerWidth;

    $(document).on('mousemove',function(e){
        var newPosX =barPosX+ ( e.pageX - posX);

        if(newPosX < 0){
            newPosX = 0;
        }
        if(newPosX>windowWidth-that.width()){
            newPosX=windowWidth-that.width();
        }


        that.css({left:newPosX});
    });


    $(document).on('mouseup',function(){
        var posX = that.position().left;
        if(posX< windowWidth/4){
            that.animate({left:0},function(){
            imgChangeStage(1);
            });
        }
        if(posX > windowWidth/4 && posX< windowWidth/2){
            that.animate({left:(windowWidth/2)-that.width()},function(){
            imgChangeStage(2);
            });
        }
        if(posX> windowWidth/2 && posX< windowWidth*0.75){
            that.animate({left:(windowWidth/2)-that.width()},function(){
            imgChangeStage(2);
            });
        }
        if(posX> windowWidth*0.75){
            that.animate({left:windowWidth - that.width()*2},function(){
            imgChangeStage(3);
            });
        }

        $(document).off('mousemove');
    });
});

function imgChangeStage(stage){
    switch(stage){
        case 1:
            $('.woman').animate({top:0,left:0});
            break;
        case 2:
            $('.woman').animate({top:-150,left:150});
            break;
        case 3:
              $('.woman').animate({top:0,left:300});
            break;
    
    }

}