feat(react-range-slider): introduce RangeSlider component#35751
Open
soniaboller wants to merge 13 commits intomicrosoft:react-range-sliderfrom
Open
feat(react-range-slider): introduce RangeSlider component#35751soniaboller wants to merge 13 commits intomicrosoft:react-range-sliderfrom
soniaboller wants to merge 13 commits intomicrosoft:react-range-sliderfrom
Conversation
|
Pull request demo site: URL |
mainframev
requested changes
Mar 2, 2026
Contributor
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
...ges/react-components/react-slider/library/src/components/RangeSlider/useRangeSliderState.tsx
Outdated
Show resolved
Hide resolved
...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
mainframev
requested changes
Mar 2, 2026
...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
mainframev
requested changes
Mar 17, 2026
packages/react-components/react-utilities/src/utils/getPercent.ts
Outdated
Show resolved
Hide resolved
mainframev
requested changes
Mar 17, 2026
packages/react-components/react-slider/library/src/components/RangeSlider/useRangeSlider.ts
Show resolved
Hide resolved
packages/react-components/react-slider/library/src/components/RangeSlider/RangeSlider.types.ts
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/library/src/components/RangeSlider/RangeSlider.test.tsx
Show resolved
Hide resolved
packages/react-components/react-slider/library/src/components/RangeSlider/RangeSlider.types.ts
Show resolved
Hide resolved
packages/react-components/react-slider/library/src/components/RangeSlider/RangeSlider.types.ts
Show resolved
Hide resolved
packages/react-components/react-slider/library/src/components/RangeSlider/RangeSlider.test.tsx
Show resolved
Hide resolved
mainframev
approved these changes
Apr 2, 2026
Contributor
mainframev
left a comment
mainframev
left a comment
There was a problem hiding this comment.
LGTM, regenerate api.md file so build pipeline pass :)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previous Behavior
Current Slider component only supports single input
New Behavior
This PR introduces a new RangeSlider component, which is part of the
@fluentui/react-sliderpackage. RangeSlider lets users select a bounded range (lower + upper value) along a shared rail, rather than a single point. Both thumbs can be dragged, touched, or adjusted with the keyboard. It shares the same visual treatment as the existing Slider (including small/medium sizes, horizontal/vertical orientation, LTR/RTL, step marks, and disabled state) but renders two native elements under the hood so both values are keyboard-operable, screen-reader accessible, and participate in form submissions.When thumbs overlap (same value), the last-interacted thumb stays elevated and reachable. Pointer interactions use closest-thumb detection on click, with smooth drag via pointer capture. Each input's range is dynamically constrained to the other thumb's value, preventing crossover from the keyboard.
Additional changes:
@fluentui/react-utilitiesas a reusable@internalhelper (with unit tests) so both components share itRelated Issue(s)
feat(react-range-slider-preview): scaffold package and add spec #35440