title: JQuery Slider doesn't get its values updated correctly when called dynamically
body: <p>I'm calling container.slider(...) dynamically and only getting the correct look when it gets called for the first time. How do I fix it?</p>
  
  <p>Update - Clearly the demo is a quick hack reproducing the problem, let's not pick at using global vars etc unless it relates to the problem.</p>
  
  <p>Repro (press the button a few times):</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html style="height: 100%;"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="styles/themes/ui-lightness/jquery-ui-1.9.0.custom.min.css" rel="stylesheet"
          type="text/css" /&gt;
      &lt;script src="scripts/external/jquery-1.8.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="scripts/external/jquery-ui-1.9.0.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(function () {
              //
              var longValues = [10, 50, 90];
              var shortValues = [50];
              var mode;
  
              function setLong() {
                  $("#c").slider({ orientation: "horizontal", range: false, values: longValues, min: 0, max: 100, step: 1 });
                  mode = "long";
              }
  
              function setShort() {
                  $("#c").slider({ orientation: "horizontal", range: false, values: shortValues, min: 0, max: 100, step: 1 });
                  mode = "short";
              }
  
  
              $("#t").on("click", function () {
  
  
                  if (mode == "long") {
                      console.log("set short");
                      setShort();
  
                  }
                  else {
                      console.log("set long");
                      setLong();
                  }
              });
  
              setLong();
  
          });
      &lt;/script&gt; 
  &lt;/head&gt;
  &lt;body style="height: 100%;"&gt;
  
     &lt;div id="c" style="width: 200px; vertical-align: middle;"&gt;
     &lt;/div&gt;
  
     &lt;button id="t"&gt;Toggle
     &lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>