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

我还为input添加了#sliderVolOutput个事件，用于更新隐藏input的值并触发change事件。 change事件非常重要，因为没有它，句柄将不会更新：

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

Fiddle Demo

Answer 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) {

然后，例如我想改变我的参数＆＃34; Audio Volume＆＃34;从-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);

目前唯一的问题是我必须将输入框配置为＆＃39; text＆＃39;，因为如果我将其设置为＆＃39; number＆＃39;微调器不允许低于0。

基础6滑块：范围从负值开始

2 个答案: