search

leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.67k stars 660 forks source link

Merging overlapping tooltip position is off #1217

Closed bjarnef closed 2 years ago

bjarnef commented 2 years ago

When merging overlapping tooltips was introduced it looked great https://github.com/leongersen/noUiSlider/issues/1032 https://refreshless.com/nouislider/examples/#section-merging-tooltips

But it seems something has changed in recent updates as the position is off.

The example here is based on v15.6.0

https://user-images.githubusercontent.com/2919859/182472435-8e70971f-3279-4496-bef6-f31ffbca3501.mp4

When I revert back to v15.4.0 it starts working again.

https://user-images.githubusercontent.com/2919859/182475079-ae607ad3-cb5d-45ec-b10c-cc951a5e97af.mp4

Not sure which change broke this feature though, but it seems to be related to one on the changes v15.5.0 where I could reproduce the issue as well.

leongersen commented 2 years ago

This is an unfortunate side effect of a compatibility fix in 15.5.0.

TLDR: these changes in the default stylesheet need to be incorporated in your overriding styles.

See #1167 for more discussion on this.

bjarnef commented 2 years ago

Yes, we include the nouislider.min.css and overwrite a bit of the styling. But not regarding height and width on .@{noUi-css-prefix}-connect and .@{noUi-css-prefix}-origin

https://github.com/leongersen/noUiSlider/commit/a1f8f17fa7a2a2ea81a8f9a4fd7c4692ebe16927

When I remove the custom stylesheet overwriting the default CSS I still get this:

https://user-images.githubusercontent.com/2919859/182635980-4ca0c457-6ee9-45bb-beed-4e03b61546ca.mp4

What am I missing?

leongersen commented 2 years ago

The example on merging overlapping tooltips was also updated to accommodate for the sizing changes, you'll want to upgrade that, too. I'll make sure to flag that in the changelog.

bjarnef commented 2 years ago

@leongersen yes, that was it. Thanks! 😁

I also originally added this: https://github.com/leongersen/noUiSlider/issues/1032#issuecomment-625199498 So if handle A and handle B are located at same value there is only a single value in tooltip.

image

In the example it looks like this:

image

github-actions[bot] commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.