title: Knockoutjs, jquery mobile slider
body: <p>I was wondering if someone had a working example of JQM slider with knockoutjs.  I have 2 issues:</p>
  
  <p>1) binding the value to an observable - I can bind it initially i.e. set the "value" of the slider, but this does not update the underlying observable when dragged - I think that this is to do with JQM putting elements over the input to represent it?</p>
  
  <p>2) refreshing the style when changing the min, max, value properties.</p>
  
  <p>Here is a subset of what I have, currentItems changes based on a selection:</p>
  
  <pre><code>workloadViewModel.filterValues = ko.dependentObservable(function () {
  var tmp = {};
  var itms = this.currentItems();
  
  if (itms.length == 0) return;
  
  tmp.max = itms[0].val;
  tmp.min = itms[itms.length - 1].val;
  tmp.minRange = this.minRange();
  
  return tmp;
  }, workloadViewModel);
  
  
  ko.bindingHandlers.jqmRefreshSlider = {
  update: function (element, valueAccessor) {
      ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency
      try {
          $("input[type=range]").slider("refresh");            
      } catch (error) {
          trace("error refreshing slider");
      }
  }
  };
  
  &lt;div id="filters" data-bind="template: {name: 'filterTemplate', data: filterValues}, jqmRefreshSlider: filterValues"&gt;&lt;/div&gt;
  
  &lt;script id='filterTemplate' type='text/html'&gt;        
  
      &lt;p&gt;min: ${minRange}&lt;/p&gt;
      &lt;p&gt;min: ${min}&lt;/p&gt;
      &lt;p&gt;max: ${max}&lt;/p&gt;
      &lt;div&gt;
          &lt;input type="range" name="slider_min" id="slider_min" value="${minRange}" min="${min}" max="${max}" /&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks you very much for any help you can give me.</p>
  
  <p>J</p>