Slider
A value or a range on a track that carries its own name and reading, with a handle that comes forward on hover and a fill that eases to a click or a key but follows a drag exactly.
01Preview
0102Installation
npx shadcn@latest add https://aiellie.app/r/slider.json03API reference
07From the Base UI documentation
Groups all parts of the slider. Renders a <div> element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | Identifies the field when a form is submitted. |
| defaultValue | number | number[] | - | The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the value prop instead. |
| value | number | number[] | - | The value of the slider. For range sliders, provide an array with one value per thumb. |
| onValueChange | ((value: number | number[], eventDetails: Slider.Root.ChangeEventDetails) => void) | - | 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 | number[], eventDetails: Slider.Root.CommitEventDetails) => void) | - | 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 |
| form | string | - | Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form. |
| locale | Intl.LocalesArgument | - | The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale. |
| thumbAlignment | 'center' | 'edge' | 'edge-client-only' | '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 edgeedge: The thumb is inset within the control such that its edge is aligned with the control edgeedge-client-only: Same as edge but renders after React hydration on the client, reducing bundle size in return |
| thumbCollisionBehavior | 'push' | 'swap' | 'none' | '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. |
| step | number | 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 | 10 | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. |
| minStepsBetweenValues | number | 0 | The minimum steps between values in a range slider. |
| min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. |
| max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. |
| format | Intl.NumberFormatOptions | - | Options to format the value. |
| disabled | boolean | false | Whether the slider should ignore user interaction. |
| orientation | Orientation | 'horizontal' | The component orientation. |
| className | string | ((state: Slider.Root.State) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: Slider.Root.State) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement | ((props: HTMLProps, state: Slider.Root.State) => ReactElement) | - | 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. |
Data Attributes
| Attribute | Type | Description |
|---|---|---|
| data-dragging | - | Present while the user is dragging. |
| data-orientation | 'horizontal' | 'vertical' | Indicates the orientation of the slider. |
| data-disabled | - | Present when the slider is disabled. |
| data-valid | - | Present when the slider is in a valid state (when wrapped in Field.Root). |
| data-invalid | - | Present when the slider is in an invalid state (when wrapped in Field.Root). |
| data-dirty | - | Present when the slider's value has changed (when wrapped in Field.Root). |
| data-touched | - | Present when the slider has been touched (when wrapped in Field.Root). |
| data-focused | - | Present when the slider is focused (when wrapped in Field.Root). |