Building an accessible Slider component using State Machines
summary
Builds a fully accessible slider component and shows the actual XState object model, the events (pointerdown pointermove pointerup arrow keys home end blur) and the context (min max step disabled) used to drive it, wires those to the DOM via prop connectors that return thumb track range input props, styles it with Chakra UI styling, demonstrates live in CodeSandbox and shows it works in forms and across React Vue Solid by reusing the XState state machine logic.
AI-written summary · about
chapters (7)
- 0:00Introduction
- 0:23Overview
- 4:25Flowchart
- 7:20Dragon State
- 10:34Consuming the State Machine
- 12:59Review
- 14:27Demo
related talks
44mIntroduction to statecharts
45mState of the Art User Interfaces with State Machines
40mVisualize your State Management with XState
44mScaling State in Vue: Why XState Matters
31mXState: the Visual Future of State Management
42mTackle React component complexity using Reactive Statecharts
29mCrafting Stateful Styles with State Machines
28mState machines for frontend state management