Difference in behaviour between keyboard and mouse when slider movement completes

[joeworkman]

Discussed in https://github.com/foundation/foundation-sites/discussions/12372

^{Originally posted by rickcurran January 21, 2022}
I have a slider that I am using in a current project which lets the user select a salary range. The slider uses data-binding and has a visible input field showing the value of the slider as it changes, the value increments / deincrements by 1000 as you change the slider.

When you move the slider it uses the moved.zf.slider event to format the value in the input field so that it renders as a formatted currency value. When you use the mouse to change the slider this works fine, but when using the keyboard to change the slider with the arrows keys the same code results in a 'NaN' error with the value in the input field.

I have a made a codepen with a basic example of this slider, use the mouse and it should work fine, click on the slider handle and then use the left/right arrow keys to change it and then you will see the 'NaN' error and then the slider doesn't change:

https://codepen.io/rickcurran/pen/WNZqPyo

Note in this example in the codepen I also have a focus and blur event on the input field, so if you click into it then the currency formatting is removed, click out and the currency formatting is applied to the value again.

It seems there is some kind of difference between using these two methods of interaction with the slider but I don't understand what that could be. I have taken a look at the source foundation.slider.js JS file for the slider but I'm not really familiar with how it works, I can see there is some code relating to mouse use and some for keyboard but I can't see if there's anything specific that could be an issue here. In theory there shouldn't be any difference, when the moved.zf.slider event is triggered you'd think it would be the same regardless of whether keyboard or mouse is being used, but there's something odd going on somewhere.

Is anyone familiar with the foundation.slider.js JS code that might have an understanding of what's happening here?