Обновление слайдера Foundation 6 на странице загрузки

Question

У меня есть слайдер Foundation 6 на html-странице, которую я использую для настройки параметров устройства. На загрузке страницы я читал параметры из XML-файла, и я задал страницу соответствующим образом.

Что касается ползунка, я изменяю номер входа, который подключен через aria-contro l к ползунку. Проблема в том, что слайдер не обновляется. Как обновить слайдер?

Там 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> 

и здесь Javascript я использую, чтобы обновить форму на нагрузке:

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) 
} 

Answer 1

Во-первых, display_selector не является допустимым attribute, насколько как slider является чтобы вы могли избавиться от него. Я предполагаю, что вы вызываете $(document).foundation() для инициализации слайдера ?, если нет, убедитесь, что вы делаете это в нижней части body.

Чтобы уточнить значение slider, используйте Foundation.Slider.defaults.intialStart. Объект Foundation содержит свойства, представляющие все доступные плагины. Каждый плагин имеет объект defaults, который состоит из множества свойств, которые вы можете переопределить перед инициализацией.

Эти две строки добиться того, что вы хотите:

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

Очень важно, что $(document).foundation() вызывается после установки каких-либо по умолчанию, поскольку в противном случае изменения не вступят в силу. $(document).foundation() будет нацелен на все плагины Foundation на странице, что вы хотите на начальной загрузке страницы.

Если в дальнейшем вы хотите настроить таргетинг на slider, вы можете сделать следующее:

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

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

Fiddle Demo