react-component / react-component/slider
Support discontinuous multi-ranges (or custom isActive logic)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.1k
- Forks
- 768
- Avg merge
- 11d 22h
- Merged PRs (30d)
- 5
Description
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: https://github.com/react-component/slider/blob/f571a1eaedbf843a3abdbd987db9a797ba10cb90/src/common/Steps.jsx#L26
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/common/Steps.jsx at the linked location and trace how current slider values determine active marks and dots. Define the requested isActive hook behavior, including its interaction with the existing active styling, and verify that individual marks or dots can appear inactive while the surrounding ranges remain selected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100