title: jquery Ui price Slider cookie
body: <p>im having dificulties of integrating cookie support (not so good with it) for the fallowing price slider</p>
  
  <p>Here is the code for the js</p>
  
  <pre><code>$(window).load(function(){
  function showProducts(minPrice, maxPrice) {
      $("#products li").hide().filter(function() {
          var price = parseInt($(this).data("price"), 10);
          return price &gt;= minPrice &amp;&amp; price &lt;= maxPrice;
      }).show();
  }
  
  $(function() {
      var options = {
          range: true,
          min: 0,
          max: 500,
          values: [50, 300],
          slide: function(event, ui) {
              var min = ui.values[0],
                  max = ui.values[1];
  
              $("#amount").val("$" + min + " - $" + max);
              showProducts(min, max);
          }
      }, min, max;
  
      $("#slider-range").slider(options);
  
      min = $("#slider-range").slider("values", 0);
      max = $("#slider-range").slider("values", 1);
  
      $("#amount").val("$" + min + " - $" + max);
  
      showProducts(min, max);
  });​
  });
  </code></pre>
  
  <p>and the html</p>
  
  <pre><code>&lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
  &lt;div class="demo"&gt;
  
      &lt;p&gt;
          &lt;label for="amount"&gt;Price range:&lt;/label&gt;
          &lt;input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /&gt;
      &lt;/p&gt;
  
      &lt;div id="slider-range"&gt;&lt;/div&gt;
      &lt;ul id="products"&gt;
              &lt;li data-price="10"&gt; product - £10 &lt;/li&gt;
              &lt;li data-price="50"&gt; product - £50 &lt;/li&gt;
              &lt;li data-price="100"&gt; product - £100 &lt;/li&gt;
              &lt;li data-price="150"&gt; product - £150 &lt;/li&gt;
              &lt;li data-price="200"&gt; product - £200 &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div
  </code></pre>
  
  <p>​</p>
  
  <p>Here is link to my jsfindle <a href="http://jsfiddle.net/nSJAS/" rel="nofollow">Price slider</a></p>
  
  <p>it uses jquery 1.72</p>
  
  <p>My question is how to put cookie support to it, so when visitor selects something it will save his selection and when he refreshes the page or comes back to the page it will still include his selected values.</p>