1

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.

Regarding the slider, I modify the input number which is connected via aria-control to the slider. The problem is that the slider does not update. How can I update the slider?

There the html:

<div class="row">
  <div class="small-4 large-4 columns">
    <label>Audio&nbsp;Volume</label>
  </div>
  <div class="small-6 large-6 columns">
    <div class="slider" id="slidervol" data-slider data-end="100" display_selector: "#slidervol">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderVolOutput"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="small-2 large-2 columns">
    <input name="AudioVolTxtbox" type="number" style="width: 4em;" tabindex="2" id="sliderVolOutput">
  </div>
</div>

and here the javascript I use to update the form on load:

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)
}
Yass
  • 2,658
  • 3
  • 13
  • 21
peregrinus
  • 147
  • 1
  • 12

1 Answers1

2

Firstly, display_selector isn't a valid attribute as far as a slider is concerned, so you can get rid of it. I'm assuming you're calling $(document).foundation() to initialize the slider?, if not, make sure you do so at the bottom of the body.

In order to update the slider's value, use Foundation.Slider.defaults.intialStart. The Foundation object contains properties representing all of the available plugins. Each plugin has a defaults object that consists of numerous properties you can override before initialization.

These two lines will achieve what you want:

Foundation.Slider.defaults.initialStart = 33;
$(document).foundation();

It's important that $(document).foundation() is called after setting any defaults as otherwise the changes will not take effect. $(document).foundation() will target all of the Foundation plugins on the page, which is what you want on the initial page load.

If later on you want to specifically target the slider, you can do the following:

var target = document.getElementById("slidervol");    
var options = {
  "initialStart": 33
};

var elem = new Foundation.Slider($(target), options);

Fiddle Demo

Yass
  • 2,658
  • 3
  • 13
  • 21
  • The second part of your answer solves my problem. I also removed the display_selector. The foundation was already correctly initialized with $(document).foundation(); I spent some time in trying to fix my problem: is there some documentation available on the topics which involves the solution you provided? Thank you Yass. – peregrinus Mar 29 '16 at 09:54
  • 1
    No probs. The documentation is lacking when it comes to initializing plugins and I discovered the above through trial and error. The process is the same for other plugins, with the only difference being in the options. – Yass Mar 29 '16 at 10:25