react-component / react-component/slider

Range slider with center value and only one handle?

Open
#488 2 comments 0 reactions 0 assignees View on GitHub

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:

screen shot 2018-10-31 at 16 16 46

screen shot 2018-10-31 at 16 17 00

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

  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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.