Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider handler, wrapped as react component, value updates with offset by 1 when clicking on negative step #11390

Closed
4 tasks done
altras opened this issue Jul 8, 2018 · 2 comments · Fixed by #11409
Closed
4 tasks done

Comments

@altras
Copy link
Contributor

altras commented Jul 8, 2018

Hello!
I hope this issue finds you joyful :)

What should happen?

I'm expecting my reactified slider handle to move where the user has clicked, all the times.

What happens instead?

slider

The slider handle is correctly setting it's value when clicking on positive numbers. But when clicking on negative the e.target.firstChild.attributes.getNamedItem('aria-valuenow').value from $('.slider').on('changed.zf.slider)' event is having an offset by 1 :/

Possible Solution

I wanted to use some method to update the handler value again when consuming the event $('.slider').on('changed.zf.slider). Something like https://github.com/zurb/foundation-sites/blob/develop/js/foundation.slider.js#L341 but this is not working and it seems like a workaround rather than a fix.

    $('.slider').on('changed.zf.slider', e => {
      let sliderVal = parseInt(
        e.target.firstChild.attributes.getNamedItem('aria-valuenow').value,
        10,
      )
      if (sliderVal < 0) {
        sliderVal -= 1
        $('.slider').foundation('_setValues', jQuery('.slider'), sliderVal)
      }
    })

Any ideas what may be causing this problem? Or how to use the internal _setValues method to properly update the value when clicking on negative step?

Test Case and/or Steps to Reproduce

Test Case:

I've tried to recreate the issue in codepen https://codepen.io/altras/pen/oyKPJG?editors=0010 It's using our css for styling but even without it it behaves the same.

Context

We want to include the slider in a journey
clicking-numbers to map users pleasantness and energy. But when using mouse clicking behavior the slider is not updating properly if we want to select a negative step.

Your Environment

  • Foundation version(s) used: 6.4.3 foundation.min.js
  • Browser(s) name and version(s):
    • Chrome Version 67.0.3396.99 (Official Build) (64-bit)
    • Firefox Quantum 61.0.1 (64-bit)
  • Operating System and version (desktop or mobile): MacOS 10.13.4 (17E202)

Checklist (all required):

  • I have read and follow the CONTRIBUTING.md document.
  • There are no other issues similar to this one.
  • The issue title is descriptive.
  • The template is correctly filled.
@altras
Copy link
Contributor Author

altras commented Jul 16, 2018

Hmmmm, even dragging is not working properly. Negative values are handled with an offset

@altras
Copy link
Contributor Author

altras commented Jul 18, 2018

@ncoden Any forecasts when v6.5.0.rc-3 is coming out with this ? :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant