Difference in behaviour between keyboard and mouse when slider movement completes

[rickcurran]

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?

[rickcurran]

Sorry to bump this issue, @joeworkman would you have any insight into the Slider JS code at all?

[rickcurran]

Ok, I managed to get a bit of time to dig into the foundation.slider.js code to try and get a better understanding of what the difference in behaviour between mouse and keyboard usage could be, and I think I've got my head around the difference and why I was seeing the error when trying to use the code in my example Codepen.

Looking at the code that deals with the movement of the slider handles, when the handles are moved via the mouse it gets the value of the slider's position from a data-attribute on the slider aria-valuenow, but in the code that handles the keyboard arrow movement it was getting the value directly from the related bound input field instead. So the issue I was encountering with the keyboard is that when it was getting the value from the input field which was a currency string like £100,000 rather than plain 100000 so this results in an error when parseFloat is applied to it.

Here's the line that gets the value for mouse interaction:

foundation-sites/js/foundation.slider.js

Line 213 in 8846fda

var h1Val = parseFloat(this.$handle.attr('aria-valuenow'));

Here's the line that gets the value for keyboard interaction:

foundation-sites/js/foundation.slider.js

Line 524 in 8846fda

oldValue = parseFloat(_this.inputs.eq(idx).val()),

So the proposed fix which I have tried and seems to work correctly is to make the keyboard interaction get the value from the same data-attribute, so line 524 would be this instead:

oldValue = parseFloat($handle.attr('aria-valuenow')),

I'm definitely not super-familiar with all of this code, can someone confirm whether this change would have any unexpected consequences? I don't think it should as far as I can see so I'd like to submit this a PR and get this fixed if possible.

[joeworkman]

Nice! Do you know how to submit a PR?

[rickcurran]

@joeworkman Kind of, I submitted one earlier on so hopefully I've done it ok!