Allow each value to have a different tooltip formatter

[ni3k]

We’re using this slider for our project, and you guys did a really great job with it—it’s set up really nicely. Kudos!

But, there’s one thing I’m missing: being able to have different tooltip formats when I put in different values (so each value can be formatted differently). If you think having more tooltip functions is a good idea, I’m ready to help by adding this to the project. To make it clear what I’m missing, I’ll give an example below of how it could be done with options:

                   <Slider
                        ....
                        :options="{
                            connect: [true, true, true],
                            tooltips: [
                                { from: Number, to: (value) => `This is the first value ${value}` },
                                { from: Number, to: () => 'Second value' },
                            ]
                        }"
                       ...
                    ></Slider>

The feature would be particularly useful when you want to add a different name to the tooltip.

The problem with using options is that there is no way to merge the tooltips since the internal tooltip formatter is used in the case of merging.

Proposal: Allow format to be an array of functions (v) => string and use it based on the value's index const tooltipsFormat = v.map((v, idx) => tooltipFormats.value[i])

[ni3k]

feel free to assign me to the issue and I'll be back with a MR

[fuxinko]

I managed to handle this in a very hacky way. From format function I returned HTML with 2 span elements, one for each handle and then show and hide them with some weird CSS - https://stackoverflow.com/a/12198561