JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<div data-role="page" id="main-page">
    <div id="loading-overlay" data-bind="visible: loading"></div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li><a href="#slider-page">
			<h2>Qty. is:<span data-bind="text: quantity"></span></h2>
			</a>
            </li>
        </ul>
    </div>
</div>
<div data-role="page" id="slider-page">
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="quantity-slider">Quantity:</label>
            <input type="range" name="quantity-slider" id="quantity-slider" min="0" max="10" data-bind="value: quantity, slider: quantity">
        </div>
        	<h2 data-bind="text: quantity">Qty.</h2>
	<a href="#main-page" data-role="back">Back</a>

    </div>
</div>

CSS

html { height: 100%; }

body {
    position: relative;
    height: 100%;
    width: 100%;
}

#loading-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('http://img.cdn.tl/loading51.gif') white no-repeat center;
    opacity: 0.75;
}

JavaScript

/* custom binding handler thanks to Varun http://stackoverflow.com/a/16493161/2308978 */
ko.bindingHandlers.slider = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        $(document).on({
            "mouseup touchend keypress": function (elem) {
                var sliderVal = $('#' + element.id).val();
                value(sliderVal);
            }
        }, ".ui-slider");
    }
};


var VM = function () {
    self = this;
    self.quantity = ko.observable(4);
    self.loading = ko.observable(true);
};


var vm = new VM();

$(document).ready(function () {
    ko.applyBindings(vm);
    vm.loading(false);
});

$(document).on('pagebeforeshow', '#slider-page', function () {
    $('#quantity-slider').val(vm.quantity());
    $('#quantity-slider').slider('refresh');
    vm.loading(true);
});

$(document).on('pageshow', '#slider-page', function () {
    vm.loading(false);
});