Inverted Connects for unconstrained behavior

[5andr0]

Here's an implementation idea for feature request #1262
I had a similar request for a slider which selects a yearly season range, which also had to cover overlaps over December-January.
The only way to achieve this was to destroy and recreate the slider with inverted connects when an overlap happens, but that destroyed the slider drag focus aswell, so you can never get the sliders past each other.

So I had to write my own patch adding a new behavior "invert-connects" which can be used like that:

noUiSlider.create(document.getElementById('slider'), {
        start: [1, 12],
        connect: true,
        range: {
            'min': 1,
            'max': 12
        },
        behaviour: "unconstrained-invert-connects-drag",
        step: 1,
    });

I also made it possible to manually control inverting connects with the added API invertConnects or updating any connects options via updateOptions.

This patch is IE9 compatible!

[5andr0]

@leongersen Implemented the changes into nouislider.ts and added documentation.
Tests were successful with nouislider.min.js generated by npm run build.
Only tested the documentation in an html environment, not the full php docs site.
I also left a donation, thanks for the project!

[leongersen]

Thanks for your PR, as well as your sponsorship, I appreciate it.

I'm having a spin at testing this right now. An issue I'm running into is that this logic does not fully account for more than two handles.

You'll see what I mean if you set the start values in the added documentation to start: [20*60, 8*60, 10*60, 16*60] (as an example).

I'm having a look to see if I can get that in.

[5andr0]

Thanks for your PR, as well as your sponsorship, I appreciate it.

I'm having a spin at testing this right now. An issue I'm running into is that this logic does not fully account for more than two handles.

You'll see what I mean if you set the start values in the added documentation to start: [20*60, 8*60, 10*60, 16*60] (as an example).

I'm having a look to see if I can get that in.

Yea, I was thinking about it supporting more than 2 handles, but came to the conclusion that it really doesn't make sense to use this outside of 2 handles. Couldn't think of a usecase. If someone really needs two ranges overlapping from end to start, they can just implement two sliders for it. Maybe you can add a commit to limit it to 2 handles or just a note in the documentation.

Update:
To fix the logic for multiple handles, you could copy the array, sort it and check sequentially if the elements are equal. Then maybe run updateConnect on all connects, not just the adjacent ones. Like connect, the scope_ConnectsInverted state would also have to be stored in an array for each connect element. But I think you will still run into more problems with multiple handles like overlapping connects. You would have to change the whole updateConnect logic to individually draw the connects to the ends instead of to the next handle and work with priorities to draw non inverted connects over inverted connects if they have a different color.

All of that just to support something that probably noone will ever use makes no sense to put the extra work in it. It would also unnecessarily bloat the size of the module.

[leongersen]

I came to the same conclusion; this is a nice feature and there is not much of a use case of trying to implement this for sliders with more than two handles.

I'm making some changes:

• Document that connect can be updated
• Bypass the full update logic when only the connects need to update
• Throw an error if invertConnects is used on sliders that do not have two handles
• Fix eslint

[5andr0]

I came to the same conclusion; this is a nice feature and there is not much of a use case of trying to implement this for sliders with more than two handles.

I'm making some changes:

• Document that connect can be updated
• Bypass the full update logic when only the connects need to update
• Throw an error if invertConnects is used on sliders that do not have to handles
• Fix eslint

Changes sound good! Thanks so much for your help to implement this 🤩

[leongersen]

I've merged this and released noUiSlider 15.8.0. Thank you for contributing!

https://refreshless.com/nouislider/behaviour-option/#section-invert-connects