react-component / react-component/slider
Range slider with center value and only one handle?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.1k
- Forks
- 768
- Avg merge
- 11d 22h
- Merged PRs (30d)
- 5
Description
What would be the recommended way to achieve something like this:


I did implement that using some trickery like hiding the second handle, setting its value to 0 (center value) and swapping track and handle styles based on the second value but that produces an annoying side effect:
When the active handle crosses the "hidden" center handle the active one gets swapped to the previously hidden handle. Swapping styles works but the drag effect remains on the now hidden handle. You have to regrab the new handle to continue.
So is there a better way to do this with existing functionality that doesn't produce the sluggishness described?
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
No file or test is named. Start by reviewing the slider's existing handle and drag behavior, focusing on what happens when the active handle crosses the center value; done means a centered range interaction with one visible handle can be used without losing the drag.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100