title: Foundation range sliders only work after launching browser console
body: <p>I'm coding an application using <strong>AngularJS v1.3.0</strong> and <strong>Foundation 5.0.3</strong>. In one of my pages, I have a a couple of fieldsets, each one containing a few <a href="http://foundation.zurb.com/docs/components/range_slider.html" rel="nofollow">range sliders</a>. Something like this</p>
  
  <pre><code>&lt;fieldset ng-repeat="element in list" id="element_{{element.ID}}"&gt;
    &lt;legend&gt;Element: {{element.name}}&lt;/legend&gt;
    &lt;div ng-repeat="subelement in element.list" id="subelement_{{subelement.ID}}"&gt;
      &lt;div class="small-10 medium-11 columns"&gt;
        &lt;div class="range-slider round" data-slider="50"&gt;
          &lt;span class="range-slider-handle"&gt;&lt;/span&gt;
          &lt;span class="range-slider-active-segment"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>The problem is <strong>I can't move the sliders until I open the browser console</strong>. It happens in Firefox and Chrome. I guess AngularJS defines some variables when the debug mode is activated in the browser, and this causes the problem. But I don't really know...</p>
  
  <p>Any clues?</p>
  
  <p>Many thanks in advance</p>