feat(react-range-slider): introduce RangeSlider component#35751
feat(react-range-slider): introduce RangeSlider component#35751soniaboller wants to merge 7 commits intomicrosoft:react-range-sliderfrom
Conversation
|
Pull request demo site: URL |
There was a problem hiding this comment.
When the thumbs overlap, the start thumb is always the active one - even if the user most recently interacted with the end thumb. Can we add a ref to track the last-used thumb, so when they overlap the correct thumb becomes active?
Screen.Recording.2026-03-02.at.14.47.15.mov
| rangeSliderStepsPercentVar, | ||
| } = rangeSliderCSSVars; | ||
|
|
||
| const getPercent = (value: number, min: number, max: number) => (max === min ? 0 : ((value - min) / (max - min)) * 100); |
There was a problem hiding this comment.
We should consider moving getPercent into the react-utilities package so we can reuse it across components instead of duplicating the logic. It’s currently implemented twice here, and the same calculation also exists in AlphaSlider in react-color-picker. Centralizing it in utilities would let Slider and RangeSlider import a single shared implementation.
There was a problem hiding this comment.
Yeah that makes sense! Do you want me to add it to the react-utilities package and just update it's usage in RangeSlider? Or make the change in Slider and AlphaSlider as well?
...ct-components/react-slider/library/src/components/RangeSlider/useRangeSliderStyles.styles.ts
Show resolved
Hide resolved
...ges/react-components/react-slider/library/src/components/RangeSlider/useRangeSliderState.tsx
Outdated
Show resolved
Hide resolved
...ges/react-components/react-slider/library/src/components/RangeSlider/useRangeSliderState.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-slider/stories/src/RangeSlider/index.stories.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-slider/stories/src/RangeSlider/index.stories.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-slider/stories/src/RangeSlider/index.stories.tsx
Show resolved
Hide resolved
…st for initial state, input focus for touch, pointer events fix, story import updates
2 participants
Previous Behavior
New Behavior
Related Issue(s)