title: Get Bootstrap-Slider working inside Popover
body: <p>I had no problem working with bootstrap-slider (<a href="http://www.eyecon.ro/bootstrap-slider/" rel="nofollow">http://www.eyecon.ro/bootstrap-slider/</a>) work using the simplest example provided on that site.  However, I was intending to use one in a bootstrap popover as part of a more extended set of settings.  The simplest example I could think of is here:</p>
  
  <pre><code>    &lt;html&gt; 
      &lt;head&gt;
       &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/slider.css"&gt;
  
  
       &lt;script src="js/vendor/jquery-1.9.1.js"&gt;&lt;/script&gt;
       &lt;script src="js/vendor/less-1.4.1.min.js"&gt;&lt;/script&gt;
       &lt;script src="js/vendor/bootstrap.js"&gt;&lt;/script&gt;
       &lt;script src="js/vendor/bootstrap-slider.js"&gt;&lt;/script&gt;
  
       &lt;script&gt;
       $(function () {
            $('#rangeSlider').slider({
                formater: function(value) {
                  return 'Current value: '+value;
                tooltip: 'show';
                }
       });
  
            $("#popoverbutton").popover({
                                 html: true,
                                 placement: 'bottom',
                                 title: 'Options',
                                 content: function(){
                                              return $("#popover-content").html();
                                          }});
  
  
             });
       &lt;/script&gt;
       &lt;/head&gt;
  
       &lt;body&gt;
       &lt;h4&gt; This is a test! &lt;/h4&gt;
       &lt;div class="row"&gt;
        &lt;a href="#" id="popoverbutton" class="btn btn-inverse" rel="popover"&gt;&lt;i class="icon-cog  icon-white"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
       &lt;div id="popover-content" class="hide"&gt;
           &lt;div class="well"&gt; Range: &lt;input type="text" class="span2"      value="50"id="rangeSlider" data-slider-min="10" data-slider-max="100" data-slider-step="5" data-slider-value="50"&gt;
     &lt;/div&gt;
          &lt;/div&gt;
       &lt;/body&gt; 
       &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, if you try to load this, it doesn't work.  The slider is rendered correctly, but cannot be interacted with, no tooltip appears, etc.  </p>
  
  <p>A diff between the generated html for the slider component inside and outside of a popup reveals them to be identical, so I fail to understand the holdup.  Anyone have experience with this particular issue?</p>