import type * as React from 'react'; import type { Direction } from '../utils/direction.cjs'; import type { PrimitivePropsWithRef } from '../utils/primitive.cjs'; /** * Payload of `onValueChange`: the new values, previous values, and what drove the change. */ export interface SliderValueChangeDetail { /** The values the slider settled on, one per thumb. */ value: number[]; /** The values held before this change, or `null` when there were none. */ previousValue: number[] | null; /** * What drove the change; `'pointer'` covers both a track press and a drag frame. */ reason: 'keyboard' | 'pointer' | 'programmatic'; } /** @internal Shared state distributed from {@link Slider} to its parts via context. */ export interface SliderContextValue { values: number[]; min: number; max: number; disabled: boolean; orientation: 'horizontal' | 'vertical'; /** * Resolved once on root so all parts agree on track start, used to map pointer and position thumbs. */ direction: Direction; thumbIndexRef: React.RefObject; /** Index of the thumb a pointer gesture is currently moving, or `null` between gestures. */ draggingIndex: number | null; rootNode: HTMLSpanElement | null; /** `reason` travels with the write, so the emitted detail names the interaction that caused it. */ updateValue: (index: number, value: number, reason: SliderValueChangeDetail['reason']) => void; step: number; /** Already resolved: the `largeStep` prop, or the derived tenth-of-range fallback. */ largeStep: number; name?: string | undefined; form?: string | undefined; thumbLabels?: readonly string[] | undefined; } /** Props for the {@link Slider} root. */ export interface SliderProps extends Omit, 'defaultValue' | 'onChange'> { /** * Selected values, one per thumb, for controlled usage. Pair with `onValueChange`. * @default undefined */ value?: number[] | undefined; /** * Initial values, one per thumb, for uncontrolled usage. A single-element * array renders a simple slider; two elements render a range slider. * @default [0] */ defaultValue?: number[] | undefined; /** * Fires on every change with the new values, previous values, and reason; a no-op change emits nothing. * @default undefined */ onValueChange?: ((detail: SliderValueChangeDetail) => void) | undefined; /** * Fires once with final values when drag ends, suppressed if values unchanged * (bare click already in place). * @default undefined */ onValueCommit?: ((value: number[]) => void) | undefined; /** * Minimum value of the range the slider can select. * @default 0 */ min?: number | undefined; /** * Maximum value of the range the slider can select. * @default 100 */ max?: number | undefined; /** * Increment values are rounded to, for both pointer and keyboard interaction. * @default 1 */ step?: number | undefined; /** * Disables pointer and keyboard interaction on all thumbs. * @default false */ disabled?: boolean | undefined; /** * Layout axis, exposed as `data-orientation` and used to map pointer * position and Arrow keys to a value. * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical' | undefined; /** * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by; defaults to a tenth of the range, floored at one step. * @default Math.max((max - min) / 10, step) */ largeStep?: number | undefined; /** * Minimum gap, counted in steps, that adjacent values must keep; at `0` two thumbs may share a value. * @default 0 */ minStepsBetweenValues?: number | undefined; /** * Name for native form participation; each thumb renders its own hidden input. * @default undefined */ name?: string | undefined; /** * Id of the `
` the slider submits into, forwarded to every thumb's * hidden input, so a slider can live outside the form it belongs to. * @default undefined */ form?: string | undefined; /** * Ticks rendered along the track, one derived `SliderMark` part each. * Ignored when `children` is given. * @default undefined — no marks are rendered. */ marks?: readonly SliderMarkData[] | undefined; /** * Shows the focused/dragged thumb's current value in a derived tooltip, positioned by the skin; ignored when `children` is given. * @default false */ showTooltip?: boolean | undefined; /** * Accessible names for derived thumbs, one per value; needed since `role="slider"` takes no name from content. * @default undefined */ thumbLabels?: readonly string[] | undefined; /** * Size rung the skin scales the track and thumbs by, mirrored to `data-size`. * @default undefined — the skin's own default size. */ size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined; } /** * Entry of {@link SliderProps.marks} — a tick with optional label. */ export interface SliderMarkData { /** The value on the track this mark sits at. */ value: number; /** Text rendered inside the derived mark. */ label?: string | undefined; } /** Props for the {@link SliderTrack}, the full-length background bar. */ export interface SliderTrackProps extends PrimitivePropsWithRef<'span'> { } /** Props for the {@link SliderRange}, the filled portion between the min and selected value(s). */ export interface SliderRangeProps extends PrimitivePropsWithRef<'span'> { } /** Props for a {@link SliderThumb} handle. */ export interface SliderThumbProps extends PrimitivePropsWithRef<'span'> { /** * Which value in the array this thumb controls; defaults to its render order among siblings. * @default undefined */ index?: number | undefined; /** * Announcement for this thumb's value, written to `aria-valuetext`, when the raw number doesn't match. * @default undefined */ valueText?: string | undefined; /** * Accessible name for this thumb, since it has no visible text content. * @default undefined */ 'aria-label'?: string | undefined; } /** Props for a {@link SliderMark} tick. */ export interface SliderMarkProps extends PrimitivePropsWithRef<'span'> { /** * The value on the track this mark sits at, positioned with the same logical offset the thumb uses. */ value: number; }