Fix for difference in behaviour between mouse and keyboard interactions 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.

diff --git a/js/foundation.slider.js b/js/foundation.slider.js
index 6dc849a96c75873ad5a9d35d29f3d465c7c94152..8df9d5c634a42b7d56d3de59304141b40b013204 100644 (file)
--- a/js/foundation.slider.js
+++ b/js/foundation.slider.js
@@ -521,7 +521,7 @@ class Slider extends Plugin {
     $handle.off('keydown.zf.slider').on('keydown.zf.slider', function(e) {
       var _$handle = $(this),
           idx = _this.options.doubleSided ? _this.handles.index(_$handle) : 0,
-          oldValue = parseFloat(_this.inputs.eq(idx).val()),
+          oldValue = parseFloat($handle.attr('aria-valuenow')),
           newValue;
 
       // handle keyboard event with keyboard util