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

更新：

为了响应您的附加查询，我有时间使用隐藏控件实现所需的功能（编辑文本框中的值导致滑块更新）。

slider-handle 现在以隐藏控件 (aria-controls) 为目标，它将始终包含正值。文本框将包含负（计算）值。这是 slider-handle 更新后的 html 的样子：

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

这是我使用的额外隐藏输入：

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

我还为 #sliderVolOutput 添加了一个 input 事件，用于更新隐藏 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 所以在 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);

目前我遇到的唯一问题是我必须将输入框配置为 'text'，因为如果我将其设置为 'number' 微调器不允许低于 0 .

Foundation 6 滑块：范围从负值开始

Foundation 6 slider: range stating from negative values

slider

range

negative-number

zurb-foundation