Merge tooltips solution is not working correctly when using `:lazy="true"`

[rajolm]

@NightCatSama I know that tooltips merge was removed at v3 (I hope you will rethink about this very useful feature and reimplement again)
but I saw your suggestion solution here #502 (comment)

I implemented it but it doesn't work as expected when you use :lazy="true", the tooltips overlap over each other until you release the mouse click as in this example:
https://jsfiddle.net/gpe7d6Lw/

It is very important to use :lazy="true" to not sending many AJAX requests when dragging the slider.

I tried to solved by listening to two events @change and @dragging together and update the values on @dragging to get the computed property showMergeTooltip calculated again to enable the merge tooltips thing, but that didn't work, it seems like listening to @change and @dragging together cause an issue, some times only @dragging function executed, other times only @change function executed

https://jsfiddle.net/gpe7d6Lw/7/

I will be thankful if I can find a better solution to make merge tooltips work when using :lazy="true"

Thanks

Environment

• Vue version: v2.6
• Component Version: v3.2.16

[NightCatSama]

try this https://jsfiddle.net/rke9a4xL/

[rajolm]

try this https://jsfiddle.net/rke9a4xL/

@NightCatSama
Thanks for the help
Sadly this will not work for me, as I want to send AJAX request on @change and in your link, you used setTooltipValue method for both @change and @dragging, so the AJAX request will be fired many times while you dragging the dot

I will thankful if you have any suggestion to solve this

[NightCatSama]

try this https://jsfiddle.net/rke9a4xL/

@NightCatSama Thanks for the help Sadly this will not work for me, as I want to send AJAX request on @change and in your link, you used setTooltipValue method for both @change and @dragging, so the AJAX request will be fired many times while you dragging the dot

I will thankful if you have any suggestion to solve this

Just AJAX request it on @change's callback.

https://jsfiddle.net/2rh3dqt9/1/

[rajolm]

Just AJAX request it on @change's callback.

https://jsfiddle.net/2rh3dqt9/1/

@NightCatSama Thanks again, your implementation worked, but I didn't like that now I have to add the values two times, as value: [0, 10], and as tooltipValue: [0, 10],

  data () {
    return {
    	value: [0, 10],
      tooltipValue: [0, 10],
    }
  },

I tried to solve it using different way, with only one value:

  data () {
    return {
    	value: [0, 10],
    }
  },

take a look here:
https://jsfiddle.net/Lsgjyu0b/

But as you see, I used @drag-end="fetchSomething" in addition to @change="fetchSomething" because when you use @dragging event, the @change doesn't fired when you drag the dot, which in my opinion is a strange behavior, as the value is change after the end of the dragging, so it should fire @change event right?
I expected that @change will be fired when you click on the rail + at end of the dragging the dot, but that not the case, at the end of the dragging, the change event doesn't fire.

Can you fix this? or at least create a new event that fired at both the "clicking the rail" and at "the end dragging the dot"?

[NightCatSama]

@rajolm It is normal that the change event is not triggered, because you set the value during drag-end, which causes the internal judgment of the component not to change, so the change event is not triggered.

[rajolm]

@rajolm It is normal that the change event is not triggered, because you set the value during drag-end, which causes the internal judgment of the component not to change, so the change event is not triggered.

@NightCatSama I didn't wanted to use @drag-end, but I was forced to use it because what I said before that when I use @dragging, the @change isn't fired when the value changed by dragging the dot, I think the @change event should be fired at both cases, when you "click the rail" or "drag the dot", but as I said, the @change event is not fired :(

So, it will be great if you can solve this, if you don't want to change the behavior by making the @change event firing at the end of dragging the dot, maybe it will be a good idea to introduce a new event that fired at "click the rail" and "at the end of dragging the dot", what you think?

[NightCatSama]

@rajolm

Under normal use, change is correctly triggered after a click or drag.

The above example works because the value was manually set in the dragging and darg-end events, resulting in the component not triggering the change event because the internal value was not changed.

So I think it's best to add a tooltipValue to represent the value displayed on the Tooltip separately.

https://jsfiddle.net/m31fo7wb/

[rajolm]

@NightCatSama Thanks again for the advise and I hope you reconsider adding merge tooltip feature as soon as possible