Slider
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Slider } from "@corew500/ui/slider"
<Slider>Content</Slider>Variants
sliderControlVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
sliderTrackVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
sliderThumbVariants
| Axis | Values | Default |
|---|---|---|
| size | smdefaultlg | default |
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | enum | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| defaultValue | enum | — | The uncontrolled value of the slider when it’s initially rendered. To render a controlled slider, use the `value` prop instead. |
| style | enum | — | Style applied to the element, or a function that returns a style object based on the component’s state. |
| disabled | enum | false | Whether the slider should ignore user interaction. |
| format | NumberFormatOptions | — | Options to format the input value. |
| locale | enum | — | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. |
| max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. |
| min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. |
| minStepsBetweenValues | number | 0 | The minimum steps between values in a range slider. |
| name | string | — | Identifies the field when a form is submitted. |
| orientation | enum | 'horizontal' | The component orientation. |
| 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. |
| thumbAlignment | enum | '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 | enum | '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 | enum | — | The value of the slider. For ranged sliders, provide an array with two values. |
| onValueChange | (value: number | readonly number[], eventDetails: SliderRootChangeEventDetails) => void | — | Callback function that is fired when the slider's value changed. You can pull out the new value by accessing `event.target.value` (any). 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 | — | Callback function that is fired when the `pointerup` is triggered. **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 |
| render | enum | — | 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. |
| size | enum | — | — |
Accessibility
Keyboard Navigation
- Keyboard accessible: Arrow keys to adjust value, Home/End for min/max
- Focus visible ring on thumb for keyboard navigation
- For range sliders, Tab moves between thumbs
Screen Readers
- - Uses `role="slider"` for proper semantics (handled by Base UI)
- `aria-valuemin`, `aria-valuemax`, `aria-valuenow` managed automatically
Additional
- Disabled state indicated visually via reduced opacity
Localization
Translatable Content
- - Labels should be provided externally via `FieldLabel`
- For accessible name, use `aria-label` or associate with a label
Locale-Specific Formatting
- Value formatting (if displayed) should be handled externally