@fayegram-ai/faye-ui/controls/slider
Public exports and dependency-resolved component properties, with usage and rendering guidance.
Import
import { Slider } from '@fayegram-ai/faye-ui/controls/slider';Usage and behavior guide · API JSON
This entry declares a client boundary. Follow the rendering guide for framework integration.
Public exports
| Name | Kind | Resolved declaration type |
|---|---|---|
SliderRootProps | type | SliderRootProps<Value> |
SliderMark | type | SliderMark |
DiscreteSliderProps | type | DiscreteSliderProps<Value> |
Slider | value | { readonly Root: typeof Root; readonly DiscreteRoot: typeof DiscreteRoot; readonly Marks: { (input: HTMLAttributes<HTMLDivElement> & { marks: readonly SliderMark[]; } & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> | undefined; } | undefined; }): import("react").ReactElement; displayName: string; }; readonly Control: { (input: Omit<import("@base-ui/react").SliderControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/fa… (full type in API JSON) |
Slider
Public component; use the linked family guide for complete composition and behavior.
Dependency-resolved declaration properties. Common React/native HTML attributes are omitted from the table; use the full declaration and React/native references. Generic and union restrictions remain authoritative in TypeScript.
Slider.Root
| Property | Required | Type | Meaning |
|---|---|---|---|
className | No | string | ((state: SliderRootState) => string | undefined) | undefined | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | No | Value | undefined | The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the value prop instead. |
disabled | No | boolean | undefined | Whether the slider should ignore user interaction. |
form | No | string | undefined | Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form. |
format | No | Intl.NumberFormatOptions | undefined | Options to format the value. |
formatValue | No | ((value: number) => string) | undefined | See the usage contract and declaration. |
interaction | No | InteractionOptions | undefined | See the usage contract and declaration. |
largeStep | No | number | undefined | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. |
locale | No | Intl.LocalesArgument | The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale. |
max | No | number | undefined | The maximum allowed value of the slider. Should not be equal to min. |
min | No | number | undefined | The minimum allowed value of the slider. Should not be equal to max. |
minStepsBetweenValues | No | number | undefined | The minimum steps between values in a range slider. |
name | No | string | undefined | Identifies the field when a form is submitted. |
onValueChange | No | ((value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void) | undefined | Callback function that is fired when the slider's value changed. Receives the new value as the first argument; the originating event is available as eventDetails.event. The value is also reflected on eventDetails.event.target.value for form integration. The eventDetails.reason indicates what triggered the change: - 'input-change' when the hidden range input emits a change event (for example, via form integration) - 'track-press' when the control track is pressed - 'drag' while dragging a thumb - 'keyboard' for keyboard input - 'none' when the change is triggered without a specific interaction |
onValueCommitted | No | ((value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void) | undefined | Callback function that is fired when a value change is committed. Does not fire if the value did not change, or if the change was canceled. Warning: This is a generic event, not a change event. The eventDetails.reason indicates what triggered the commit: - 'drag' while dragging a thumb - 'track-press' when the control track is pressed - 'keyboard' for keyboard input - 'input-change' when the hidden range input emits a change event (for example, via form integration) - 'none' when the commit occurs without a specific interaction |
orientation | No | Orientation | undefined | The component orientation. |
ref | No | Ref<HTMLDivElement> | undefined | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
render | No | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState> | undefined | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
scale | No | ((value: number) => number) | undefined | Transform displayed/announced values while retaining raw values for forms and positioning. |
step | No | number | undefined | The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step. |
style | No | CSSProperties | ((state: SliderRootState) => React.CSSProperties | undefined) | undefined | Style applied to the element, or a function that returns a style object based on the component's state. |
thumbAlignment | No | "center" | "edge" | "edge-client-only" | undefined | How the thumb(s) are aligned relative to Slider.Control when the value is at min or max: - center: The center of the thumb is aligned with the control edge - edge: The thumb is inset within the control such that its edge is aligned with the control edge - edge-client-only: Same as edge but renders after React hydration on the client, reducing bundle size in return |
thumbCollisionBehavior | No | "push" | "none" | "swap" | undefined | Controls how thumbs behave when they collide during pointer interactions. - 'push' (default): Thumbs push each other without restoring their previous positions when dragged back. - 'swap': Thumbs swap places when dragged past each other. - 'none': Thumbs cannot move past each other; excess movement is ignored. |
value | No | Value | undefined | The value of the slider. For range sliders, provide an array with one value per thumb. |
variants | No | { readonly tone?: VisualVariant<"slider", "tone"> | undefined; readonly size?: VisualVariant<"slider", "size"> | undefined; } | undefined | See the usage contract and declaration. |
Slider.DiscreteRoot
| Property | Required | Type | Meaning |
|---|---|---|---|
allowedValues | Yes | readonly number[] | See the usage contract and declaration. |
className | No | string | ((state: SliderRootState) => string | undefined) | undefined | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | No | Value | undefined | The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the value prop instead. |
disabled | No | boolean | undefined | Whether the slider should ignore user interaction. |
form | No | string | undefined | Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form. |
format | No | Intl.NumberFormatOptions | undefined | Options to format the value. |
formatValue | No | ((value: number) => string) | undefined | See the usage contract and declaration. |
interaction | No | InteractionOptions | undefined | See the usage contract and declaration. |
largeStep | No | number | undefined | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. |
locale | No | Intl.LocalesArgument | The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale. |
minStepsBetweenValues | No | number | undefined | The minimum steps between values in a range slider. |
name | No | string | undefined | Identifies the field when a form is submitted. |
onValueChange | No | ((value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void) | undefined | Callback function that is fired when the slider's value changed. Receives the new value as the first argument; the originating event is available as eventDetails.event. The value is also reflected on eventDetails.event.target.value for form integration. The eventDetails.reason indicates what triggered the change: - 'input-change' when the hidden range input emits a change event (for example, via form integration) - 'track-press' when the control track is pressed - 'drag' while dragging a thumb - 'keyboard' for keyboard input - 'none' when the change is triggered without a specific interaction |
onValueCommitted | No | ((value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void) | undefined | Callback function that is fired when a value change is committed. Does not fire if the value did not change, or if the change was canceled. Warning: This is a generic event, not a change event. The eventDetails.reason indicates what triggered the commit: - 'drag' while dragging a thumb - 'track-press' when the control track is pressed - 'keyboard' for keyboard input - 'input-change' when the hidden range input emits a change event (for example, via form integration) - 'none' when the commit occurs without a specific interaction |
orientation | No | Orientation | undefined | The component orientation. |
ref | No | Ref<HTMLDivElement> | undefined | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
render | No | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState> | undefined | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
scale | No | ((value: number) => number) | undefined | Transform displayed/announced values while retaining raw values for forms and positioning. |
style | No | CSSProperties | ((state: SliderRootState) => React.CSSProperties | undefined) | undefined | Style applied to the element, or a function that returns a style object based on the component's state. |
thumbAlignment | No | "center" | "edge" | "edge-client-only" | undefined | How the thumb(s) are aligned relative to Slider.Control when the value is at min or max: - center: The center of the thumb is aligned with the control edge - edge: The thumb is inset within the control such that its edge is aligned with the control edge - edge-client-only: Same as edge but renders after React hydration on the client, reducing bundle size in return |
value | No | Value | undefined | The value of the slider. For range sliders, provide an array with one value per thumb. |
variants | No | { readonly tone?: VisualVariant<"slider", "tone"> | undefined; readonly size?: VisualVariant<"slider", "size"> | undefined; } | undefined | See the usage contract and declaration. |
Slider.Marks
| Property | Required | Type | Meaning |
|---|---|---|---|
marks | Yes | readonly SliderMark[] | See the usage contract and declaration. |
variants | No | { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> | undefined; } | undefined | See the usage contract and declaration. |
Slider.Control
| Property | Required | Type | Meaning |
|---|---|---|---|
className | No | string | ((state: SliderControlState) => string | undefined) | undefined | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | No | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderControlState> | undefined | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | No | CSSProperties | ((state: SliderControlState) => React.CSSProperties | undefined) | undefined | Style applied to the element, or a function that returns a style object based on the component's state. |
variants | No | { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> | undefined; } | undefined | See the usage contract and declaration. |
Slider.Track
| Property | Required | Type | Meaning |
|---|---|---|---|
className | No | string | ((state: SliderTrackState) => string | undefined) | undefined | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | No | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderTrackState> | undefined | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | No | CSSProperties | ((state: SliderTrackState) => React.CSSProperties | undefined) | undefined | Style applied to the element, or a function that returns a style object based on the component's state. |
variants | No | { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> | undefined; } | undefined | See the usage contract and declaration. |
Slider.Indicator
| Property | Required | Type | Meaning |
|---|---|---|---|
className | No | string | ((state: SliderIndicatorState) => string | undefined) | undefined | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | No | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderIndicatorState> | undefined | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | No | CSSProperties | ((state: SliderIndicatorState) => React.CSSProperties | undefined) | undefined | Style applied to the element, or a function that returns a style object based on the component's state. |
variants | No | { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> | undefined; } | undefined | See the usage contract and declaration. |
Slider.Thumb
| Property | Required | Type | Meaning |
|---|---|---|---|
aria-valuetext | No | string | undefined | A string value forwarded to the `aria-valuetext` attribute of the input. Ignored when getAriaValueText is provided. |
className | No | string | ((state: SliderThumbState) => string | undefined) | undefined | CSS class applied to the element, or a function that returns a class based on the component's state. |
disabled | No | boolean | undefined | Whether the thumb should ignore user interaction. |
getAriaLabel | No | ((index: number) => string) | null | undefined | A function which returns a string value for the `aria-label` attribute of the input. |
getAriaValueText | No | ((formattedValue: string, value: number, index: number) => string) | null | undefined | A function which returns a string value for the `aria-valuetext` attribute of the input. This is important for screen reader users. |
index | No | number | undefined | The index of the thumb which corresponds to the index of its value in the value or defaultValue array. This prop is required to support server-side rendering for range sliders with multiple thumbs. |
inputRef | No | Ref<HTMLInputElement> | undefined | A ref to access the nested input element. |
onBlur | No | FocusEventHandler<HTMLInputElement> | undefined | A blur handler forwarded to the input. |
onFocus | No | FocusEventHandler<HTMLInputElement> | undefined | A focus handler forwarded to the input. |
onKeyDown | No | KeyboardEventHandler<HTMLInputElement> | undefined | A keydown handler forwarded to the input. |
render | No | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderThumbState> | undefined | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | No | CSSProperties | ((state: SliderThumbState) => React.CSSProperties | undefined) | undefined | Style applied to the element, or a function that returns a style object based on the component's state. |
tabIndex | No | number | undefined | Optional tab index attribute forwarded to the input. |
variants | No | { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> | undefined; } | undefined | See the usage contract and declaration. |
Slider.Value
| Property | Required | Type | Meaning |
|---|---|---|---|
children | No | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode) | null | undefined | See the usage contract and declaration. |
className | No | string | ((state: SliderValueState) => string | undefined) | undefined | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | No | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderValueState> | undefined | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | No | CSSProperties | ((state: SliderValueState) => React.CSSProperties | undefined) | undefined | Style applied to the element, or a function that returns a style object based on the component's state. |
variants | No | { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> | undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> | undefined; } | undefined | See the usage contract and declaration. |
Defaults and customization
Descriptor defaults: {"size":"md","tone":"neutral"}. Parts: root, control, track, indicator, thumb, value, marks. Explicit instance props take precedence over configured defaults.
Use semantic tokens, public part hooks and customization sheets. Keep visual configuration separate from application state.
State, events and accessibility
For interactive controls, pair a controlled value/open prop with its corresponding change callback; default props initialize uncontrolled state. Keep application validation and submission policy explicit. Name controls with visible labels, name icon-only actions on the button, and preserve focus and dismissal behavior when replacing parts. Use native form names and submit/reset types where supported. See the usage guide for component-specific behavior and live examples.
Declaration authority
Generated from packages/faye-ui/dist/controls/slider.d.ts after the semantic package build. Common native/React attributes are intentionally omitted from property tables. Generic overloads, discriminated unions and complete inherited attributes remain authoritative in installed TypeScript declarations. React DOM attributes and Base UI component contracts describe the inherited foundations.