Question

我浏览了基金会6的文档，无法找到问题的解决方案。

我有一个绑定到范围滑块的输入字段，并希望在用户放开句柄后调用一个格式化输入值的函数（我必须这样做，因为滑块无法处理值逗号和点，如1,200.87）。

我认为 moved.zf.slider 事件对此非常理想，文档说它会在手柄完成移动时触发，但是只要手柄处于触发状态就会触发多次当用户放开鼠标按钮/停止触摸屏幕时，我希望它只能触发一次。

可以这样做吗？

Answer 1

每次手柄完成移动时（例如，在捕捉的增量之间），

moved.zf.slider会触发，因此您需要一个基于与范围输入交互后的暂停的功能，changed.zf.slider与data-changed-delay

结合使用

所以你的HTML会是这样的：

  <div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true" data-changed-delay="2000">
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
    <span class="slider-fill" data-slider-fill></span>
    <input id="result" type="hidden">
  </div>

其中data-changed-delay="2000"是您在决定完成之前要等待的时间（以毫秒为单位）（2秒可能很长，但它更容易让它看起来有效）。你也可以通过jQuery这样做。注：默认情况下，如果您没有明确设置它是500毫秒，这是一个很好的猜测暂停时间。

然后你的jQuery是这样的：

$('.slider').on('changed.zf.slider', function() {
  //do whatever when user is done with the range slider
});

所有这一切都是等待触发器（changed.zf.slider），然后运行附带的脚本。

我在JSFiddle

上做了一个例子

Reference in Foundation docs

Foundation 6 Range滑块 - 当用户放开手柄时更新输入值

1 个答案: