Vue-slider-component: Slider Tooltips Overlap

Created on 30 Mar 2018 · 8Comments · Source: NightCatSama/vue-slider-component

I'll probably open a PR for this myself when I have some time, but in case anyone wants to get to it before me:

Currently if you have a range slider with two tooltips, they'll begin to overlap when the values get close together. This can make it difficult to see what values you actually have selected. See https://nightcatsama.github.io/vue-slider-component/example/#demo3 for an example of this.

A good solution would be to have them join together when they would otherwise overlap each other. See http://ionden.com/a/plugins/ion.rangeslider/demo.html for an example of what I mean.

Source

michaelpelletier

All 8 comments

I am sorry that I haven’t responded for so long.

This is a good feature, but I haven’t had time recently. I’ll consider adding it later.

NightCatSama on 2 Apr 2018

No worries on the delay! I may open a PR for it myself in the coming weeks if I can find the time. I'm doing it in a hacky way now and I'd like to clean it up and make it more "official".

michaelpelletier on 3 Apr 2018

Is this feature available in version 3 ?

I tried and they still seem to overlap : https://jsfiddle.net/5zs2abwg/

digEmAll on 11 Apr 2019

👍1

@digEmAll Unfortunately, this feature was removed in version 3.x.

However, similar functions can be implemented through the slot.

https://jsfiddle.net/NightCatSama/3hg0246q/5/

NightCatSama on 11 Apr 2019

👍1

Thanks, that's really useful !

digEmAll on 11 Apr 2019

BTW, this is a very useful feature that would be nice to have "by default" in this great library.

Just my two cents :)

digEmAll on 11 Apr 2019

👍1

@digEmAll Thank you for your suggestion, I have considered it before.

However, in the 3.x version the tooltip is attached to the dot component. So adding a merge tooltip will make the component complex and difficult to understand.

So, i didn't add this feature.

NightCatSama on 11 Apr 2019

👍1

+1
Missing this feature greatly

@digEmAll Unfortunately, this feature was removed in version 3.x.
However, similar functions can be implemented through the slot.
https://jsfiddle.net/NightCatSama/3hg0246q/5/

This solution is quite complex to implement if you have lots of sliders.
You have make one showMergeTooltip per slider.

Plus it doesn't work well with :lazy="1" because the values only update after you release

I will have to keep using v2.x