Slide To Submit

by kthornbloom

HTML

<form action="">
    <label for="name">First Name</label>
    <input type="text" name="name">
    <label for="name">Last Name</label>
    <input type="text" name="name">
    <div class="slide-submit">
        Slide To Submit
        <div class="slide-submit-thumb">»</div>
    </div>
</form>

<form action="">
    <label for="name">IQ</label>
    <input type="text" name="name">
    <label for="name">Eye Color</label>
    <input type="text" name="name">
    <div class="slide-submit">
        Slide To Submit
        <div class="slide-submit-thumb">»</div>
    </div>
</form>

SCSS

.slide-submit {
    background: #f3f5f6;
    color: #929292;
    box-shadow: 0 0 0 1px #ccc;
    border-radius: 30px;
    text-align: right;
    padding: 1em 1em;
    font-size: .75em;
    position: relative;
    overflow: hidden;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
	transition:.2s;
}

.slide-submit-thumb {
    position: absolute;
    top: 0;
    left: 0px;
    width: 50px;
    height: 100%;
    background: linear-gradient(to top, #B2B6C1, #CBD0D4);
    box-shadow: inset 0 0 0 3px #f3f5f6, inset 0 0 0 4px rgba(0, 0, 0, 0.17);
    text-shadow: 0 -1px #828282;
    border-radius: 30px;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
    font-family: serif;
    color: #fff;
}

.slide-submit-thumb:hover {
    background: #1BA5FD;
    cursor: -webkit-grab;
    cursor: grab;
}

.slide-submit-thumb:active {
    background: #1BA5FD;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.slide-success {
    background: #1BA5FD;
    text-align: left;
    color: transparent;
    box-shadow: 0 0 0 1px #157ABB;
	.slide-submit-thumb {
		background: #1E76AF;
		box-shadow: inset 0 0 0 3px #1BA5FD, inset 0 0 0 4px rgba(0, 0, 0, 0.17);
		color: #1BA5FD;
		pointer-events: none;
	}
	&:before {
		content:'Form Submitted!';
		font-size:12px;
		color:#fff;
	}
}


/* demo css, unrelated to slider */

body {
    background: #f3f5f6;
    color: #555;
    padding: 30px;
    font-family: sans-serif;
}

form {
    background: #fff;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .1);
    padding: 20px;
    width: 300px;
    margin: 0 auto 1px auto;
}

label {
    display: block;
}

input {
    margin: 1em 0;
    width: 100%;
    padding: 1em;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

JavaScript

function releaseSlideSubmit() {
    var newpos_x = $('.draggable').position().left,
        grace_zone = '100',
        max_x = $('.draggable').parent().outerWidth(),
        accepted_x = max_x - grace_zone;
    if(newpos_x == '0'){
		// You clicked instead of dragged. Lets give you a hint.
		$('.draggable').animate({'left':'10px'},150);
		$('.draggable').animate({'left':'0px'},100);
		$('.draggable').animate({'left':'10px'},150);
		$('.draggable').animate({'left':'0px'},100);
	} else if (newpos_x >= accepted_x) {
        // Dragged all the way, submit form.
        $('.draggable').animate({
            'left': max_x - $('.draggable').outerWidth()
        }, 150);
		$('.draggable').parent().addClass('slide-success')
    } else {
        // Didn't drag enough, reset.
        $('.draggable').animate({
            'left': '0'
        }, 150);
    }
    $('.draggable').removeClass('draggable');
}

(function($) {
    $.fn.slideSubmit = function(opt) {

        opt = $.extend({
            cursor: "move"
        }, opt);

        var $el = this;

        return $el.on("mousedown", function(e) {
            var $drag = $(this).addClass('draggable');
            var drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_x = $drag.offset().left + drg_w - e.pageX,
				max_x = $('.draggable').parent().outerWidth();
            $drag.parents().on("mousemove", function(e) {			
				$('.draggable').offset({
					left: e.pageX + pos_x - drg_w
				});
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function(e) {
            releaseSlideSubmit();
        });


    }
})(jQuery);
$('.slide-submit-thumb').slideSubmit();

window.addEventListener("mouseup", function(event) {;
    $('.draggable').parents().off('mousemove');
    releaseSlideSubmit();
})

/* DRAG FUNCTION
=========================================*/
$.fn.draggable = function() {
  var offset = null;
  var start = function(e) {
    var orig...