JSFiddle - React, Tailwind, and code Playground

by jwstott

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.3.0.0a2.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.0.0a2.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.3.0.0a2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<script src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
<div data-role="page">
    <div data-role="header">
        	<h1>Page Title</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>Page content goes here.</p>
        
        <input type="range" name="slider" id="slider3" data-bind="value:val" min="10" max="50" data-highlight="true" />
        
        <div id="slider1" data-role="slider" data-bind="value:val" min="0" max="100"></div>
        
        <hr/>
       <div data-role='wijlineargauge' data-bind="wijlineargauge:{value:val}"    ></div>
       <div data-role="wijrating" data-bind="wijrating:{value:min}" data-options="{iconWidth: 32, iconHeight: 32, icons: {
					iconsClass: 'wijmo-wijrating-normal-32', hoverIconsClass: 'wijmo-wijrating-hover-32',
					ratedIconsClass: 'wijmo-wijrating-rated-32'}}">
        </div>

       
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->

JavaScript

var viewModel = function () {
    var self = this;
    self.val = ko.observable(20);
    self.min = ko.observable(4);
    self.max = ko.observable(100);
};
//$(document).bind('pageinit', function () {
$(document).ready(function() {
    
    var vm = new viewModel();
    ko.applyBindings(vm);
    $('#slider3').slider('refresh');
    $('#slider1').slider('refresh');
});