//
An input where the user selects a value from within a given range.
bun add xiod-ui1import { Slider, SliderValue } from "xiod-ui/slider";1<Slider>2 <SliderValue />3</Slider>| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number| readonly number[]| undefined | - | The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the `value` prop instead. |
disabled | boolean| undefined | false | Whether the slider should ignore user interaction. |
format | NumberFormatOptions| undefined | - | Options to format the value. |
locale | LocalesArgument | - | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. |
max | number| undefined | 100 | The maximum allowed value of the slider. Should not be equal to min. |
min | number| undefined | 0 | The minimum allowed value of the slider. Should not be equal to max. |
minStepsBetweenValues | number| undefined | 0 | The minimum steps between values in a range slider. |
name | string| undefined | - | Identifies the field when a form is submitted. |
form | string| undefined | - | Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form. |
orientation | Orientation| undefined | horizontal | The component orientation. |
step | number| undefined | 1 | 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. |
largeStep | number| undefined | 10 | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. |
thumbAlignment | "center"| "edge"| "edge-client-only"| undefined | 'center' | 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 | "none"| "push"| "swap"| undefined | 'push' | 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 | number| readonly number[]| undefined | - | The value of the slider. For range sliders, provide an array with one value per thumb. |
onValueChange | ((value: number| readonly number[], eventDetails: SliderRootChangeEventDetails) => 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 | ((value: number| readonly number[], eventDetails: SliderRootCommitEventDetails) => 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 |
className | 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. |
render | 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. |
style | CSSProperties| ((state: SliderRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
variant | "default"| "expressive"| "classic"| "fader"| "segmented"| "dotted"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: SliderValueState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | 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 | 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. |