Foundation 6 Range slider - update input value when user lets go of the handle - slider

Question

I browsed throught the docs of Foundation 6 and couldn't find a solution to my problem.
I have an input filed bound to the range slider and would like to call a function that formats the input value once the user lets go of the handle (I have to to this since the slider can't handle values with commas and dots, like 1,200.87).
I thought the moved.zf.slider event would be ideal for that, the documentation says that it fires when the handle is done moving, however it fires multiple times as long as the handle is being moved and I would like it to fire just once, when user lets go of the mouse button/stops touching the screen.
Can this be done?

Answer 1

moved.zf.slider fires each time the handle is finished moving (e.g. between snapped increments) so you want a function that is based on the pause after interaction with a range input, that's changed.zf.slider in combination with data-changed-delay
So your HTML would be something like:
<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>
Where data-changed-delay="2000" is the time in miliseconds you want to wait for before deciding they're done (2 seconds is probably quite long, but it makes it easier to see it working). You could also do this via jQuery too of course. N.B. The default if you don't set it explicitly is 500ms which is a pretty good guess of the pause time.
Then your jQuery is something like this:
$('.slider').on('changed.zf.slider', function() {
//do whatever when user is done with the range slider
});
All this does is wait for the trigger (changed.zf.slider) and then run the script enclosed.
I've put an example on JSFiddle
Reference in Foundation docs