FIX difference in behaviour between mouse & keyboard interactions on Sliders #12378

rickcurran · 2022-01-27T16:30:29Z

Description

This fix is to resolve an issue that I encountered when using a particular combination of a Slider with a bound input field, in this case the bound input field has a currency-formatting function applied on the moved.zf.slider' event, this function renders the value in the bound input field as a currency value e.g. £100,000, (See original discussion post: https://github.com/foundation/foundation-sites/discussions/12372).

See example CodePen showing the issue:
https://codepen.io/rickcurran/pen/WNZqPyo

The issue encountered is that when using mouse interaction the functionality worked correctly, but moving the same slider using the keyboard arrows resulted in a NaN error in the bound input field.

Looking at the code that deals with the movement of the slider handles in foundation.slider.js, 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 with the keyboard usage is that when it gets the value from the input field which contains a currency string like £100,000 rather than plain 100000, this results in an NaN error when parseFloat iss 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 my proposed fix 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')),

Types of changes

Documentation
[X ] Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (anything that would change an existing functionality)
Maintenance (refactor, code cleaning, development tools...)

Checklist

[ X] I have read and follow the CONTRIBUTING.md document.
[ X] The pull request title and template are correctly filled.
[ X] The pull request targets the right branch (develop or develop-v...).
[ X] My commits are correctly titled and contain all relevant information.
[] I have updated the documentation accordingly to my changes (if relevant).
[] I have added tests to cover my changes (if relevant).

…ns on Sliders This fix is to resolve an issue that I encountered when using a currency-formatted value in the bound input on a slider (discussion post: https://github.com/foundation/foundation-sites/discussions/12372). When using mouse interaction the functionality worked correctly, but moving the same slider resulted in a `NaN` error in the bound input field. Looking at the code that deals with the movement of the slider handles, when the handles are moved 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. This change modifies the code so that it gets the value from the same data-attribute for keyboard interaction as well.