Support discontinuous multi-ranges (or custom isActive logic)

[dlopuch]

Love the slider widget but I have a use case that doesn't seem to be supported, so feature request :)

Use case: select a range from a "circular domain", for example hour-of-the-day. Suppose the 'range' the user wants to select crosses over the midnight boundary (eg select 11pm - 1am), but your slider is done midnight-->noon-->midnight.

In practice, this would probably require a slider with two discontinuous ranges (eg midnight-->1am, 11pm-->midnight).

It seems rc-slider only supports continuous multi-ranges (eg 3 ranges in this example: midnight-->1am, 1am-->11pm, 11pm-->midnight).

---

Admittedly, adding "continuous" and "discontinuous" semantics to the API is probably overcomplicated. I can make my own logic to fake it with a continuous three-range, except for one thing: there appears to be no implementation hook to override the styling of specific 'active' marks and dots.

So for example, in the three range implementation (midnight-->1am, 1am-->11pm, 11pm-->midnight), I can style the middle 1am-->11pm track to look unselected and give the illusion of a discontinuous range, but if there are any marks or dots in that range, they will always get the 'active' styling.

I can set the styling of ALL active dots, but I can't appear to change the styling of individual active dots (to make them look non-active).

So, a much easier feature request without going into the "continuous"/"discontinuous" semantics would be to provide an isActive() prop/hook that would accept the current slider values and return true if a dot/mark is to be 'active'. Backwards compatible too -- if not specified, just use default behavior.

Could be plumbed somewhere down into here I think:

slider/src/common/Steps.jsx

Line 26 in f571a1e

const isActived = (!included && point === upperBound) ||