Foundation-sites: F6 - Slider handle offset when inside accordion

[jinch]

What should happen?

Slider should function the same when inside an accordion.
...

What happens instead?

Slider handle is offset from the slider on the initial load.
...

Possible Solution

Not sure of a solution or exactly the cause but I suspect the slider width is some how not properly calculated when initially loading. Maybe due to the extra padding?
...

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/jinch/pen/NWqwxYN?editors=1000
...

How to reproduce:

1. View the test case.
2. Note the position of slider handle when the page is initially loaded
3. Click the handle
4. Note it jumps back to its correct position but only when it is engaged

Context

This is making it difficult for the user to consistently and accurately control. I really need to find a solution as I have a bunch of these sliders within accordions on my production site.
...

Your Environment

• Foundation version(s) used: 6.3.1
• Browser(s) name and version(s): Firefox, Chrome, Safari
• Device, Operating System and version: MacOS Catalina
• Link to your project: https://codepen.io/jinch/pen/NWqwxYN?editors=1000

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.

[DanielRuf]

Hi @jinch,

You are using a pretty old version of Foundation Sites.

https://codepen.io/DanielRuf/pen/yLNPJQy?editors=1000

It works a bit better but in general you have to initialize the slider when the accordion is initialized or its content show.

[DanielRuf]

See https://get.foundation/sites/docs/javascript.html#adding-content-to-plugins

[jinch]

Thanks for the reply @DanielRuf

The bug is still an issue with v6.6.1 unfortunately.
https://codepen.io/jinch/pen/jOPayNe?editors=1010

I'm confused on the link you referenced. So is adding the slider programmatically the only way to work around this? How would this be implemented?

[DanielRuf]

Check https://codepen.io/DanielRuf/pen/yLNPJQy?editors=1010

But you are using the responsive-accordion-tabs component.

[jinch]

Ah.. your right!

I forgot I set that up as a responsive tab accordion. Thank you for the code reference and example though that didn't seem to do the trick as the issue was mostly on the initial load and not with interaction with it.

With your help though I think I managed to get it to function correctly again by applying the 'reInit' method as you correctly pointed out in your initial post - here: (https://get.foundation/sites/docs/javascript.html#adding-content-to-plugins)

This is my attempt at the work around that at first visual inspection seems to do the trick:
https://codepen.io/jinch/pen/VwLrPOX?editors=1010

[DanielRuf]

Awesome. I will close the issue as this seems to be resolved now.