Основание 6 слайдер: определение диапазона от отрицательных значений

Я блуждаю, если в фундаменте 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>
2 2
negative-number

2 ответа:

Вы можете установить отрицательное значение 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);
});

Обновление:

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

Теперь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');
});

Скрипка Демо

2

Я получаю вполне приличный результат латания следующим образом фундамента.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) {

Затем, например, я хочу изменить свой параметр "громкость звука" с -24 на 24 так в js: 

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

0