JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<h1 class="server">Server</h1>

<div class="draggable">
    <div class="draggable-handle"></div>
</div>

CSS

html {
    border: 1px solid #d9d9d9;
    padding: 0 0 40px;
}
body {
    margin: 250px 0 0;
    text-align: center;
    width: 100%;
}
::selection {
    background: transparent;
}
::-moz-selection {
    background: #transparent;
}
.server {
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #555;
    font: 100 24px/2.5 Helvetica, sans-serif;
    margin-left: -76px;
    position: absolute;
    width: 150px;
    left: 50%;
    top: 30px;
}
.draggable {
    background: #ccc;
    border-radius: 6px;
    border: 1px solid #aaa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    position: relative;
    height: 10px;
    width: 80%;
}
.draggable-handle {
    background: #aaa;
    border: 1px solid #999;
    border-radius: 6px;
    height: 20px;
    left: -11px;
    margin-top: -11px;
    position: absolute;
    top: 50%;
    width: 20px;
}
.flame {
    background: #c33;
    border-radius: 200px;
    box-shadow: 0 0 30px #c33;
    border: 4px solid #e63;
    color: #fff;
    font: 12px/30px sans-serif;
    height: 30px;
    left: 0;
    margin: 0;
    padding: 5px;
    position: absolute;
    top: -40px;
    -webkit-transition: 1.4s all linear;
    -moz-transition: 1.4s all linear;
    transition: 1.4s all linear;
    width: 30px;
}
.flame.float {
    border-width: 0;
    font-size: 1px;
    height: 5px;
    opacity: 0;
    margin-top: -200px;
    /* Gross that we need to use an absolute value for safari transitions */
    left: 274px !important;
    width: 5px;
}

JavaScript

var Model = Backbone.Model.extend({

    save: function () {

        var $handle = $(".draggable-handle");
        var $flame = $("<div class='flame'/>");

        $flame.text("sync!")
            .css("left", $handle.css("left"))
            .appendTo(".draggable");

        setTimeout($.proxy($flame.addClass, $flame, 'float'), 100);
        setTimeout($.proxy($flame.remove, $flame), 2700);

    }

});

var View = Backbone.View.extend({

    events: {
        "mousedown .draggable-handle": "onSliderChange"
    },

    saveInBackground: _.debounce(function (params) {
        this.model.save(params, {
            silent: true
        });
    }, 800),

    onSliderChange: function (origin) {

        var self = this;
        var $handle = $(origin.target);
        var $window = $(window);
        var last = origin.pageX;
        var max = $handle.parent().width() - 10;

        $window.on('mousemove', function (movement) {

            var delta = Math.floor(movement.pageX - last);
            var left = parseInt($handle.css("left"), 10) + delta;

            left = Math.min(max, Math.max(left, -10))

            $handle.css("left", left);

            last = movement.pageX;

            self.saveInBackground();

        });

        $window.one('mouseup', function () {
            $window.off('mousemove');
        });
    }

});

var model = new Model();
var view = new View({
    el: $(".draggable"),
    model: model
})