title: jQuery RangeSlider Widget
body: <p>I am creating a touch-capable price range-slider using jquery's rangeslider widget seen here: <a href="http://api.jquerymobile.com/rangeslider/#entry-examples" rel="nofollow">http://api.jquerymobile.com/rangeslider/#entry-examples</a></p>
  
  <p>(Note: I've found a lot of documentation on using jQuery's slider widget but not rangeslider widget).</p>
  
  <p>Here is working example:
  <a href="http://jsfiddle.net/E7xYc/1/" rel="nofollow">http://jsfiddle.net/E7xYc/1/</a></p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="../libraries/js/jquery.mobile.custom/jquery.mobile.custom.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="../libraries/js/jquery.mobile.custom/jquery.mobile.custom.structure.css" /&gt;
      &lt;link rel="stylesheet" href="../libraries/js/jquery.mobile.custom/jquery.mobile.custom.theme.css" /&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
  
      &lt;div data-role="rangeslider"&gt;
          &lt;input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40"&gt;
          &lt;input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80"&gt;
      &lt;/div&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've spent hours reading documentation and looking for examples but I can't seem to dynamically set the min,max,and value(s) of the rangeslider.</p>
  
  <p>So.. I moved past dynamically setting values and attempted to bind and onChange event to the rangeSlider and pass the values in a function.  I pull this off, but it's really hacky and I know I'm over complicating this.</p>
  
  <p>Thanks for any help, world.  Ugh.</p>