Question

是否可以有2个不同的输入来控制“基础范围”滑块？我需要添加一个字段来设置特定的分数（像这样）：https://codepen.io/jinch/pen/OaKpZX?editors=1000

<div class="row">
        <div class="small-2 columns">Width:</div>
  <div class="small-5 columns">
          <div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
            <span class="slider-handle slideWidth"  data-slider-handle role="slider" tabindex="1" aria-controls="customPort-2-width"></span>
              <span class="slider-fill" data-slider-fill></span>
          </div>
  </div>
  <div class="small-5 columns">
    <input type="number" step="1" id="customPort-2-width" style="border: 1px solid #999999; display:inline-block; width:39%;">
    <select class="fractions fractionWidth" name="WidthFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
      <option value="0" selected="">0</option>
      <option value="1/8">1/8</option>
      <option value="1/4">1/4</option>
      <option value="3/8">3/8</option>
      <option value="1/2">1/2</option>
      <option value="5/8">5/8</option>
      <option value="3/4">3/4</option>
      <option value="7/8">7/8</option>
            </select>
    <span class="small">in.</span>
  </div>

Answer 1

TL; DR好消息是这可以做到！坏消息是您需要稍微调整代码。我要在午夜十点之前输入此信息，因此您很有可能需要重构它，但我希望这是一个起点。

我将详细介绍实现的原因，但是如果您只是想了解它，我已经创建了一个Codepen https://codepen.io/jamie-endeavour/pen/zyxPaY?editors=1010

背景知识

当我第一次发现此问题时，我查看了Slider文档并注意到有关“回流”的部分-https://foundation.zurb.com/sites/docs/slider.html#reflow-在阅读了有关此方法的信息后，我决定查看Foundation源代码：

  _reflow() {
    this.setHandles();
  }

然后，我调查了setHandles() ...

  setHandles() {
    if(this.handles[1]) {
      this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true, () => {
        this._setHandlePos(this.$handle2, this.inputs.eq(1).val(), true);
      });
    } else {
      this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true);
    }
  }

请注意，_setHandlePos()引用了名为inputs的属性中的值。

初始化Slider类时，将设置以下内容：

this.inputs = this.$element.find('input');

this.$input = this.inputs.length ? this.inputs.eq(0) : $(`#${this.$handle.attr('aria-controls')}`);

在您的示例中，您没有提供输入元素。如您所见，代码使用aria-controls的值构建“输入”的选择器。这是您的限制所在，因为您将无法通过这种方式将两个输入字段与Slider相关联。

解决方案

因此，还记得this.$input中使用的三元吗？如果我们在您的<input>元素中添加.slider，则可以将其用作滑块的参考点。

<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
  <input type="hidden" id="slider-reference" value="8" />
  ...

现在您有了一个可以在两个输入字段之间使用的引用。然后，您可以针对每个元素在更改回调的后面更新此参考字段的值，然后Slider会读取并进行相应的更新。

number输入所需的JS非常简单，因为我们提供了Slider计算宽度位置所需的绝对数字。

分数输入有点时髦，因为您需要返回最小值和最大值之差（28）的一小部分，而不是最大值（在这种情况下为36）的一小部分。这就是为什么我添加了其他计算以确保您相对于Slider元素获得正确位置的原因。这也是我觉得可以用新的眼睛重构的部分

最后，一旦在每个更改处理程序中获取了新值，您只需调用_reflow方法，这将相应地更新Slider插件，而无需重新初始化插件或类似的东西！ / p>

希望这会有所帮助！

具有2个输入的基础范围滑杆？

1 个答案: