Zurb Foundation 5.5.2 范围滑块单击栏以将手柄推进到位置不起作用

Question

我正在使用 Zurb Foundation 5.5.2 并试图让范围滑块像在 Foundation web site documentation page for range sliders. The desired functionality is that you click on any location on the bar, and the handle advances to that location. On the Foundation web site kitchen sink page, clicking on the range slider bar does nothing. On this codepen 上一样工作，我使用最基本的范围滑块代码，你也不能点击栏并获得处理前进。我如何让它工作？

这是 Codepen 代码：

<div class="range-slider" data-slider>
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

Answer 1

Foundation v5.x 系列似乎在使用滑块时不会触发 mousemove 事件。在 github 上深入研究基金会问题，我发现了这个：

slider: add support for changing by clicking on the slider without having started to drag from the handle

令我震惊的是，此功能仅适用于 Foundation 库的未来版本，例如 v5.5.3 or v5.6（参见里程碑）。

但您现在可以使用该权限，只需复制并粘贴来自 github:

的原始代码

只需单击 "raw" 按钮并保存到本地存储。
所以它应该像这样工作：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
  </head>
  <body>

    <div class="row">
      <div class="small-10 medium-11 columns">
        <!-- SLIDER START   -->
        <div class="range-slider" data-slider  data-options="display_selector: #sliderOutput3;trigger_input_change: true">
          <span class="range-slider-handle" role="slider" tabindex="0"></span>
          <span class="range-slider-active-segment"></span>
        </div>
        <!-- SLIDER END   -->
      </div>
      <div class="small-2 medium-1 columns">
        <span id="sliderOutput3"></span>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Foundation updated -->
    <script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.js"></script>
    <script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.slider.js"></script>
    
    <script>$(document).foundation();</script>
  </body>
</html>

Zurb Foundation 5.5.2 范围滑块单击栏以将手柄推进到位置不起作用

Zurb Foundation 5.5.2 range slider clicking on bar to advance handle to position does not work

zurb-foundation

zurb-foundation-5