JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<div data-role="page" id="testPage">
		<div data-role="content">
      <div>
        <input type="range" name="Range1Slider" id="Range1" data-track-theme="c" min="1" max="150" data-bind="value: value1, slider: value1" />
      </div>
      <div>
        <input type="range" name="Range2Slider" id="Range2" data-track-theme="c" min="1" max="150" data-bind="value: value2, slider: value2" />
      </div>
      <div>
        <input type="range" name="Range3Slider" id="Range3" data-track-theme="c" min="1" max="150" data-bind="value: value3, slider: value3" />
      </div>
      <div>
        <input type="range" name="Range4Slider" id="Range4" data-track-theme="c" min="1" max="150" data-bind="value: value4, slider: value4" />
      </div>
      <div>
        <input type="range" name="Range5Slider" id="Range5" data-track-theme="c" min="1" max="150" data-bind="value: value5, slider: value5" />
      </div>
      <div id="output"></div>
		</div>
	</div>

JavaScript

ko.bindingHandlers.slider = {
  init: function (element, valueAccessor) {
    // use setTimeout with 0 to run this after Knockout is done
    setTimeout(function () {
      // $(element) doesn't work as that has been removed from the DOM
      var curSlider = $('#' + element.id);
      // helper function that updates the slider and refreshes the thumb location
      function setSliderValue(newValue) {
        curSlider.val(newValue).slider('refresh');
      }
      // subscribe to the bound observable and update the slider when it changes
      valueAccessor().subscribe(setSliderValue);
      // set up the initial value, which of course is NOT stored in curSlider, but the original element :\
      setSliderValue($(element).val());
      // subscribe to the slider's change event and update the bound observable
      curSlider.bind('change', function () {
        valueAccessor()(curSlider.val());
      });
    }, 0);
  }
};

var vm = {
  value1: ko.observable(1),
  value2: ko.observable(10),
  value3: ko.observable(20),
  value4: ko.observable(50),
  value5: ko.observable(100)
};

function valueChanged(newValue) {
  $('#output').html('newValue='+newValue);
}

for (var i = 1; i <= 5; i++) {
  vm['value' + i].subscribe(valueChanged);
}

ko.applyBindings(vm);