title: Foundation 6 slider update on page load
body: <p>I have a Foundation 6 Slider on an html page I use to setup a device parameters. 
  On page load, I read the parameters from an xml file and I set the page accordingly.  </p>
  
  <p>Regarding the slider, I modify the input number which is connected via <code>aria-contro</code>l to the slider. The problem is that the slider does not update. How can I update the slider?</p>
  
  <p>There the html:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="small-4 large-4 columns"&gt;
      &lt;label&gt;Audio&amp;nbsp;Volume&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="small-6 large-6 columns"&gt;
      &lt;div class="slider" id="slidervol" data-slider data-end="100" display_selector: "#slidervol"&gt;
        &lt;span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderVolOutput"&gt;&lt;/span&gt;
        &lt;span class="slider-fill" data-slider-fill&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="small-2 large-2 columns"&gt;
      &lt;input name="AudioVolTxtbox" type="number" style="width: 4em;" tabindex="2" id="sliderVolOutput"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here the javascript I use to update the form on load:</p>
  
  <pre><code>function writeDeviceConfForm(xmldoc) {
    var vartxt;
    var element;
  
    vartxt = xmldoc.getElementsByTagName("AudioVolume")[0].firstChild.nodeValue;
    document.DeviceConfig.AudioVolTxtbox.value = vartxt; //input box is correctly updated 
  
    ...
    $('#slidervol').val(33); //this does not work (do nothing)
    $('#slidervol').foundation('slider', 'set_value', 33); //this does not work (error: slider is not an accepted parameter)
  }
  </code></pre>