react-component / react-component/slider

Support discontinuous multi-ranges (or custom isActive logic)

Open
#390 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Feature
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.