title: jQuery Change slider values respectively
body: <p>I create 3 slider, [Slider 1, Slider 2, Slider 3], and they work fine individually. but I want to make them depend on each other and work respectively to main slider.</p>
  
  <p>You can see my demo here : <a href="http://jsfiddle.net/tutorialdrive/xGL8L/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>Main slider is Slider 1, and other slider 2 and slider 3 are depend on slider 1.
  If slider 1's value increase (when we slide slider) then slider 2's and slider 3's value should increase too. and same as with when we decrease value.</p>
  
  <p>Second point : If we set slider 1 to 100 and then slider 2 and 3 also on value of 100 (Automatically), then 100 is min. value of slider 2 and 3. in short value of slider 1 is minimum value of slider 2 and 3.</p>
  
  <p>For Example is slider 1 set to 500 then slider 2 and 3 can slide to increase to more then 500 but can not decrease lower then 500.</p>
  
  <p>here is a sample of my code</p>
  
  <pre><code>&lt;div id="slider1"&gt;&lt;/div&gt;&lt;br&gt;
  &lt;div id="slider2"&gt;&lt;/div&gt;&lt;br&gt;
  &lt;div id="slider3"&gt;&lt;/div&gt;&lt;br&gt;
  Slider 1 : &lt;div id="value1"&gt;&lt;/div&gt;&lt;br&gt;
  Slider 2 : &lt;div id="value2"&gt;&lt;/div&gt;&lt;br&gt;
  Slider 3 : &lt;div id="value3"&gt;&lt;/div&gt;&lt;br&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(function() {
      $( "#slider1" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
           $( "#value1" ).text(ui.value);
           $( "#slider2" ).slider('option',{min: ui.value});  
          $( "#slider2" ).slider('value',ui.value);
          $( "#slider3" ).slider('option',{min: ui.value});
        }
      });
    });
  
  $(function() {
      $( "#slider2" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
            $( "#value2" ).text(ui.value);
            $( "#value2" ).val( "$" + $( "#slider2" ).slider( "value" ) );
          $( "#amount" ).val( "$" + ui.value );
        }
      });
    });
  
  $(function() {
      $( "#slider3" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
            $( "#value3" ).text(ui.value);
            $( "#value3" ).val( "$" + $( "#slider3" ).slider( "value" ) );
          $( "#amount" ).val( "$" + ui.value );
        }
      });
    });
  </code></pre>