title: Controlling a processing.js sketch w/ a jQuery slider
body: <p>I've had some luck controlling processing.js sketches using html form elements and would like to use a jQuery slider to do the same.</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $( "#slider-range-min" ).slider({
          range: "min",
          value: 37,
          min: 1,
          max: 700,
          slide: function( event, ui ) {
              $( "#amount" ).val( "$" + ui.value );
          }
      });
      $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
  });
  &lt;/script&gt;
  
  &lt;p&gt;
  &lt;label for="amount"&gt;Maximum price:&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-min"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I think my main problem is that I don't entirely understand the slider function, how to refer to its value inside the sketch, or how to refer the window.processing.Data={}; variable inside the slider.</p>
  
  <p>Any and all help is appreciated.</p>