title: Changing min & max values of multiple JQueryUI sliders on a page from Select
body: <p>I have a page. It has many JQueryUI sliders. The value of these sliders can be set by text box or by manually dragging the slider. The min &amp; max values of the sliders can be set by changing an option in a drop-down menu, eg:</p>
  
  <pre><code>     Select slider:
  &lt;select class="dropdown" id="slider3_select"&gt;
      &lt;option value="1" data-low="1" data-high="50"&gt;Sips&lt;/option&gt;
      &lt;option value="2" data-low="1" data-high="25"&gt;Cups&lt;/option&gt;
      &lt;option value="3" data-low="1" data-high="10"&gt;Litres&lt;/option&gt;
  &lt;/select&gt; 
  </code></pre>
  
  <p>The JQuery I am using to get the data-low &amp; data-high values above, and update the slider based on them, is: </p>
  
  <pre><code>     $('.dropdown').change(function(){
          var selector = ("#" + $(this).parent().find(".slider").attr("id")),
          currentVal = parseInt($(selector).slider("value")),
          newBegin = $(this + "option:selected").data("low"),
          newEnd = $(this + "option:selected").data("high");
          $(selector).slider({
          value: currentVal,
          min: newBegin,
          max: newEnd
          });
        });
  </code></pre>
  
  <p>This works properly for the first slider on the page, but fails for the subsequent sliders- on these, the value of newBegin &amp; newEnd fails to update. I guess that I am targeting either the select .dropdown or the option:selected incorrectly, can anyone see where I'm going wrong?</p>
  
  <h2><a href="http://jsfiddle.net/SbZcf/" rel="nofollow">See the JSFiddle here</a></h2>