Skip to content

feat(react-slider): add useSliderBase_unstable hook#35815

Open
dmytrokirpa wants to merge 7 commits intomasterfrom
feat/react-slider-base-hooks
Open

feat(react-slider): add useSliderBase_unstable hook#35815
dmytrokirpa wants to merge 7 commits intomasterfrom
feat/react-slider-base-hooks

Conversation

@dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Mar 3, 2026

Summary

  • Adds useSliderBase_unstable hook to react-slider that extracts pure component logic without design props
  • Adds SliderBaseProps type omitting size (design-related prop); vertical is kept as it affects aria-orientation behavior via the orient attribute on the input element
  • Adds SliderBaseState type omitting size
  • Refactors useSlider_unstable to call useSliderBase_unstable internally
  • Exports new types and hook from package index.ts

What base hooks include

The base hook preserves:

  • Slot structure (root, input, rail, thumb slots)
  • type="range" on input
  • orient attribute (horizontal/vertical) for Firefox support
  • Focus management via useFocusWithin
  • Controlled/uncontrolled value state via useSliderState_unstable
  • Field integration via useFieldControlProps_unstable
  • disabled and vertical behavioral props

The base hook excludes:

  • size prop (small/medium - design concern)

🤖 Generated with Claude Code

dmytrokirpa and others added 2 commits March 5, 2026 11:55
Adds a base state hook for Slider component that extracts pure component logic
(ARIA, slot structure, keyboard handling, controlled/uncontrolled state) without
the design-related size prop.

- Add SliderBaseProps type omitting size (design prop); keeps vertical as it
  affects aria-orientation behavior via the orient attribute on the input
- Add SliderBaseState type omitting size
- Add useSliderBase_unstable hook that handles slot setup, focus management,
  and delegates controlled state to useSliderState_unstable
- Refactor useSlider_unstable to call useSliderBase_unstable internally
- Export new types and hook from package index.ts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@dmytrokirpa dmytrokirpa changed the base branch from experimental/component-base-hooks to master March 5, 2026 10:56
@dmytrokirpa dmytrokirpa force-pushed the feat/react-slider-base-hooks branch from 72222f8 to 70334a1 Compare March 5, 2026 10:56
@github-actions
Copy link

github-actions bot commented Mar 5, 2026

Pull request demo site: URL

@dmytrokirpa dmytrokirpa self-assigned this Mar 20, 2026
@dmytrokirpa dmytrokirpa marked this pull request as ready for review March 20, 2026 06:29
@dmytrokirpa dmytrokirpa requested a review from a team as a code owner March 20, 2026 06:29
@github-actions
Copy link

github-actions bot commented Mar 20, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.295 MB
323.649 kB
1.295 MB
323.637 kB
38 B
-12 B
react-slider
Slider
36.322 kB
12.065 kB
36.356 kB
12.08 kB
34 B
15 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.62 kB
68.716 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
108.174 kB
35.695 kB
🤖 This report was generated against cd29f13fec3bd7fe638323d6a821b4aaf931a29b

state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());

useSliderState_unstable(state, props);
useSliderState_unstable(state as SliderState, props as SliderProps);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it needed to cast as SliderState here if it accepts SliderBaseState as mentioned here: useSliderState_unstable = (state: SliderBaseState, props: SliderBaseProps)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, you're right, this is not necessary anymore since the useSliderState_unstable is updated as well. pushed a fix, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants