我正在使用Zurb Foundation 5.5.2，并试图让范围滑块像在Foundation网站文档页面上一样工作。期望的功能是，您单击工具条上的任何位置，手柄就会移动到该位置。在基金会网站的厨房水槽页面上，单击范围滑动条不起任何作用。在这个代码中，我使用了最基本的范围滑块代码，您也不能单击条并获得手柄来前进。我怎么让它工作?
下面是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系列似乎不会触发鼠标移动事件。在github上挖掘基础问题，我发现了这个:
slider:添加了在没有从手柄开始拖动的情况下通过点击滑动条来改变的支持
让我吃惊的是，这个特性只适用于Foundation库的未来版本，比如v5.5.3或v5.6(请参阅里程碑)。
但是你现在就可以使用它，只要从github上复制并传递0个原始代码:
- https://github.com/zurb/foundation/blob/master/js/foundation/foundation.js
- https://github.com/zurb/foundation/blob/master/js/foundation/foundation.slider.js
只需点击"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>