JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainscale" style="width:100%; height:30px; background:#2a2a2a; margin-top:50px; position:relative;">
</div>
<div class="scale_roll" style=" border-right:solid 2px red; border-top:solid 2px red; border-bottom:solid 2px red;  border-left:solid 2px red; background:#a4a4a4; margin-top:-28px; width:50%; height:16px;  position:absolute;">


</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

JavaScript

$( ".scale_roll" ).draggable({
	axis: "x",
	containment: 'parent',

});

$(".scale_roll").resizable({
	handles: 'e, w',	
});
function selectable_area(widtha,leftb)
{
var left_;
var width_;
	if(widtha < 0)
	{
		left_ = leftb + widtha;
		width_ = widtha * -1;
	}
	else{
		left_ = leftb;
		width_ = widtha;
	}

$(".scale_roll").css({
left:left_+"px",
width:width_+"px"
});
}



  function findPos(obj) {
        var curleft = 0, curtop = 0;
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
            return [curleft, curtop];
        } else {
            return false;
        }
    }
    function getCoords(event) {
        event = event || window.event;
        if (event.pageX || event.pageY) {
            return {x: event.pageX, y: event.pageY};
        }
        return {
            x: event.clientX + document.body.scrollLeft - document.body.clientLeft,
            y: 0,
        };
    }

    function doDraw(event) {
        if (rect) {
            var mousePos = getCoords(event);
            var currentX = mousePos.x - offset[0];
            var currentY = 15; 
            width = currentX - startX;
           
            var height = 17;
			
           // }
            if (width < 0) {
                rect.attr({'x': currentX, 'width': width * -1});
            } else {
                rect.attr({'x': startX, 'width': width});
            }
            if (height < 0) {
                rect.attr({'y': currentY, 'height': height * -1});
            } else {
                rect.attr({'y': startY, 'height': height});
            }
        }
    }

    var div_mainscale = document.getElementById('mainscale');
    var mainscale = new Raphael('mainscale');
    var rect;
    var startX = 0, startY = 0;
    var offset = findPos(div_mainscale);
    var width;
    var value_;
    div_mainscale.onmousedown = function(event) {
        var...