title: KnockoutJS - Hiding div based on slider value
body: <p>I'm trying to show/hide items within a collection using a jQueryUI slider.</p>
  
  <p>The slider returns values 1 to 10 and I want to show the item if the item's "win" property is higher than the slider's value and vice versa.</p>
  
  <p>I've got so far:</p>
  
  <p><a href="http://jsfiddle.net/FloatLeft/uqv7D/" rel="nofollow">http://jsfiddle.net/FloatLeft/uqv7D/</a></p>
  
  <p>I was hoping that this code would set the item's visibility</p>
  
  <pre><code>ko.utils.arrayForEach(viewModel.euroTeams, function(team) {
      team.win = ko.observable(team.win);
      team.lose = ko.observable(team.lose);
      team.showTeam = team.win() &gt; viewModel.wins();   
  });
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div class="team" data-bind="visible: showTeam"&gt;&lt;/div&gt;
  </code></pre>