react-component / react-component/slider

Removing handle breaks track styles

Open
#452 0 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

I am using range with multiple handles and track styles. After first rendering the slider, the props for the handles and track styles may change. ie. the user may click a button to remove a handle from the slider. I also adjust the track styles to compensate for this change. However, there is a bug in the rendering of the track styles. When I remove a handle the trackstyles can get out of sync. I have been able to work around this bug by adding a key equal to the number of handles. This work around makes keeps the track styles in sync with the handles, but it of course causes unnecessary work for react in dismounting and remounting the component and is a poor use of a key prop.

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 by reproducing the issue with a range slider using multiple handles and track styles, then change the handle props and styles after the first render. Trace the track-style rendering and handle-update path; done means styles remain aligned after a handle is removed without requiring a key that remounts the component.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.