JSFiddle - React, Tailwind, and code Playground

by hardiksondagar

HTML

<script src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>
<div style="float:left;margin-left:30px;">
<div class="message">
Thank You for Submitting....
</div>     
    <div class="slider">
    <div id="drag-x">    
        <div id="drag2" class="drag"></div>
    </div>
    <div class="slider-position"></div>    
    </div>
</div>

CSS

.drag {
    width: 15px;
    height: 30px;
    line-height: 70px;
    cursor: pointer;
    float: left;
    margin-left: -3px;
    text-align: center;
    font-size: 12px;
    background: url('http://www.huffmancode.com/demos/CAPTCHA/cursor.png') no-repeat;
    z-index: 999;

}
 
 
#drag-x {
   width: 202px;
	height: 10px;
	float: left;

    
}
 
.slider-position
{
	position: absolute;
        width: 0px;
	height: 10px;
	margin-top: 5px;
	background: #000;
	float: left;

} 
 .slider
{
	position: relative;
	width: 221px;
	height: 48px;
	background: url('http://www.huffmancode.com/demos/CAPTCHA/short_slider.gif') no-repeat;
}

.message
{
	visibility: hidden;
	font-family:verdana;
	text-shadow:1px 2px 2px #fff,1px 2px 3px rgba(0,0,0,0.2);
}

JavaScript

$(function () {
 
        $("#drag-x div[id^='drag']").draggable({
                containment: "#drag-x",
                stack: ".drag",
                axis: "x",
                drag: function() 
                {
		  	      	var offset = $(this).offset();
        				var xPos = offset.left;
        				var yPos = offset.top;
        	if($('#drag2').css('left')=='190px')
        	{
        		$('.message').css('visibility','visible');
        	}
        	else {
	     		$('.message').css('visibility','hidden');
			}
        				$('.slider-position').css('width',$('#drag2').css('left'));
					 }
                
        });
 
 
 
        /* make draggable div always on top */
        $("div[id^='drag']").mousedown(function () {
                $("div[id^='drag']").each(function () {
                        var seq = $(this).attr("id").replace("drag", "");
                        $(this).css('z-index', seq);
								                        
                        
                });
                
        });

        
        
        
});