[eliyahu-kriel]

What

A new Slider component that looks native in each design:

iOS	Material 3	Web
White 28pt knob with a shadow on a thin 4pt track (UISlider)	4dp bar handle with gaps on a 16dp track, stop dots, a value bubble while dragging; the handle narrows when pressed	18px dot on a 6px track, a pointer cursor, and a halo on hover and focus that grows while pressed

<Slider value={volume} onChange={setVolume} minimumIcon={<Text>🔈</Text>} maximumIcon={<Text>🔊</Text>} />
<Slider range min={0} max={600} step={10} value={price} onChange={setPrice} formatValue={(v) => `$${v}`} />
<Slider marks={[{ value: 0, label: '0°C' }, { value: 37, label: '37°C' }, { value: 100, label: '100°C' }]} snapToMarks valueLabel="always" />

Features

• Callbacks: onChange fires once on release, or on a key or screen-reader step. onValueChanging fires on every step of a drag, for haptics and live previews. This matches the library's wheel convention. Tapping the current value fires neither.
• Values: min, max and step (step={0} for any value). range gives two thumbs: a touch grabs the nearest one, and they can't cross.
• Marks:
  • showSteps draws a dot per step, and drops them when they'd be too close together.
  • marks takes dots with optional labels under the track.
  • snapToMarks restricts the value to the marks, like MUI's step={null}.
• Value bubble: valueLabel is 'never' | 'drag' | 'always'. 'always' keeps room above the track for it.
• Other props: formatValue, minimumIcon / maximumIcon, disabled, and slot styles (container track activeTrack thumb mark markLabel valueLabel valueLabelText).
• Accessibility: each thumb is adjustable. Arrow keys step it, Page Up / Page Down move a tenth of the range, and Home / End jump to the ends. The touch area is 44pt tall.
• RTL: the track fills from the right.

Shared with ColorPicker

These moved into core, and ColorPicker's sliders and pad use them now:

• useTrackPan: moved from color; it now takes options and adds onStart and onEnd.
• adjustableProps: one helper for the adjustable role, screen-reader actions and keys.
• Track math: clamp, clamp01 and toFraction.
• Constants: the knob (KNOB_SIZE, KNOB_COLOR, KNOB_SHADOW), TOUCH_TARGET, A11Y_ACTION / ADJUSTABLE_ACTIONS, and the Page Up / Page Down keys.

Docs and showcase

• Slider page: live examples, a prop playground and a props table. It's registered in the catalog, so it also appears in the sidebar and the example app's drawer.
• Other updates: the API reference, the designs, styling and TypeScript guides, the AI cheat sheet, the README, the home page, the hero text, and the SEO descriptions and keywords.
• Showcase: a new "Display & text" screen. Brightness and text size preview live while dragging, text size snaps to labelled marks, and focus hours are a range.

Tests

pnpm lint && pnpm typecheck && pnpm test pass (676 tests), and so do pnpm build and pnpm docs:build. New tests cover:

• the slider utils: snapping, segments, marks, nearest thumb, halo level and mark stepping;
• Slider itself: drag then commit, keys and screen-reader actions, range ordering, controlled values, the Material bubble, disabled, snap-to-marks, and the always-on bubble;
• adjustableProps, useTrackPan's new onStart / onEnd, the track math, and the showcase utils.

Writing the tests caught a bug, now fixed: a range's end thumb could be dragged below its start thumb.

I haven't checked it by hand on a device or in a browser yet.

🤖 Generated with Claude Code