我正在使用Zurb Foundation 5.5.2，并尝试使范围滑块像在Foundation网站文档页面上的范围滑块那样工作。所需的功能是单击栏上的任何位置，然后手柄将移至该位置。在Foundation网站的“厨房水槽”页面上，单击范围滑块不会执行任何操作。在我使用最基本的范围滑块代码的该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>
使用滑块时，Foundation v5.x系列似乎未触发mousemove事件。在github上研究foudantion问题，我发现了这一点：
令我惊讶的是，此功能仅适用于Foundation库的将来版本，例如v5.5.3或v5.6（请参阅里程碑）。
但是您现在就可以使用该技巧，只需复制并粘贴来自github的原始代码即可：
只需单击“原始”按钮，然后保存到本地存储。
所以它应该像这样工作：
<!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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句