Фундамент 6 слайдер: диапазон с отрицательными значениями

Question

Я блуждаю, если в базовых 6 ползунах можно разрешить отрицательные значения, например. качается от -50 до 50.

В настоящее время у меня есть ползунок в [0 100]:

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

Answer 1

Вы можете установить отрицательное значение start, но поведение непредсказуемо, когда вы делаете это. Если вы хотите использовать отрицательные значения, вам понадобится логика для обновления значения в #sliderVolOutput после перемещения дескриптора.

Событие moved.zf.slider запускается каждый раз при перемещении дескриптора, и вы можете использовать этот факт для обновления значения текстового поля. Это событие запускается несколько раз, поэтому вам нужно добавить дополнительный код, чтобы избавиться от мерцания (если это надоедает).

Я предоставил базовый код, который должен вас начать. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать.

var target = document.getElementById("slidervol"); 
var options = { 
    "start": 0, 
    "end": 100, 
    "decimal": 0 
}; 

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

$(target).on('moved.zf.slider', function() { 
    $('#sliderVolOutput').val(Number($('.slider-handle').attr('aria-valuenow')) - offset); 
}); 

Другой подход будет использовать mousemove.zf.slider событие. Это позволяет избавиться от мерцания, но значение текстового поля обновляется только вы перестали манипулировать бегунок:

$(target).on('mousemove.zf.slider', function() { 
    $('#sliderVolOutput').val(Number($('.slider-handle').attr('aria-valuenow')) - offset); 
}); 

---

UPDATE:

В ответ на ваш дополнительный запрос, I» ve успел реализовать требуемую функциональность (редактирование значения в текстовом поле, в результате чего ползунок обновляется) с помощью скрытого элемента управления.

slider-handle теперь нацелен на скрытый элемент управления (aria-controls), который всегда будет содержать положительное значение. Текстовое поле будет содержать отрицательное (вычисленное) значение. Это то, что обновленный HTML выглядит для slider-handle:

<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderVolOutputHidden"></span> 

И это дополнительный скрытый вход Я использовал:

<input type="hidden" id="sliderVolOutputHidden" value="0"> 

Я также добавил input событие для #sliderVolOutput, что обновления значение скрытого input и запускает событие change. change событие имеет важное значение, так как без него, ручка не будет обновляться:

$('#sliderVolOutput').on('input', function() { 
    $('#sliderVolOutputHidden').val(Number($('#sliderVolOutput').val()) + offset); 
    $('#sliderVolOutputHidden').trigger('change'); 
}); 

Fiddle Demo

Answer 2

я получаю довольно результат заплат следующим foundation.js. Я могу плавно изменять значения с помощью ползунка (без мерцания), но я не могу уменьшить текстовое поле (aria-controls) ниже 0, так как обработчик событий не срабатывает.

@@ -6953,13 +6953,14 @@ 
      'id': id, 
      'max': this.options.end, 
      'min': this.options.start, 
+   'offset': this.options.offset, 
      'step': this.options.step 
     }); 
     this.handles.eq(idx).attr({ 
      'role': 'slider', 
      'aria-controls': id, 
-   'aria-valuemax': this.options.end, 
-   'aria-valuemin': this.options.start, 
+   'aria-valuemax': this.options.end + this.options.offset, 
+   'aria-valuemin': this.options.start + this.options.offset, 
      'aria-valuenow': idx === 0 ? this.options.initialStart : this.options.initialEnd, 
      'aria-orientation': this.options.vertical ? 'vertical' : 'horizontal', 
      'tabindex': 0 
@@ -6978,8 +6979,8 @@ 
     key: '_setValues', 
     value: function _setValues($handle, val) { 
     var idx = this.options.doubleSided ? this.handles.index($handle) : 0; 
-  this.inputs.eq(idx).val(val); 
-  $handle.attr('aria-valuenow', val); 
+  this.inputs.eq(idx).val(val+this.options.offset); 
+  $handle.attr('aria-valuenow', val+this.options.offset); 
     } 

     /** 
@@ -7033,7 +7034,8 @@ 
     } else { 
      //change event on input 
      value = this._adjustValue(null, val); 
-   hasVal = true; 
+   value = value - this.options.offset; 
+   hasVal = true;   
     } 

     this._setHandlePos($handle, value, hasVal); 
@@ -7286,7 +7288,13 @@ 
     * @option 
     * @example false 
     */ 
- invertVertical: false 
+ invertVertical: false, 
+ /** 
+  * 
+  * @option 
+  * @example 0 
+  */ 
+  offset: 0 
    }; 

    function percent(frac, num) { 

Тогда, например, я хочу изменить параметр «Audio Volume» от -24 до 24, так в ЯШ:

// Audio Volume       
     vartxt = GetParameter("AudioVolume") // get the value in some way 
     tval = parseFloat(vartxt); 
     document.DeviceConfig.AudioVolTxtbox.value = tval - 24; //change the textbox 

     var target = document.getElementById("slidervol");  
     var options = { 
      "start": 0, 
      "end": 48, 
      "decimal": 0, 
      "step": 1, 
      "offset": -24, 
      "initialStart": tval 
     }; 
     var elem = new Foundation.Slider($(target), options); 

На данный момент единственная проблема, которую я получаю, что я должен настройте поле ввода как «текст», так как, если я установил его как «число», счетчик не позволит перейти ниже 0.