Question

我正在使用Zurb Foundation 5.5.2并尝试让范围滑块像Foundation web site documentation page for range sliders一样工作。所需的功能是您单击栏上的任何位置，并且手柄前进到该位置。在Foundation web site kitchen sink page上，单击范围滑块栏不会执行任何操作。在我使用最基本范围滑块代码的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上挖掘foudantion问题我发现了这个：

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

让我感到震惊的是，此功能仅适用于未来版本的Foundation库，例如v5.5.3或v5.6（请参阅里程碑）。

但是你现在可以使用这个方法，只需复制并过去来自github的原始代码：

只需点击＆＃34; raw＆＃34;按钮并保存到本地存储所以它应该像这样工作：

＆＃13;

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

＆＃13;

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

1 个答案: