> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Slider
> Choose a numeric value or range with draggable, keyboard-accessible thumbs.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
`Slider` supports a single number or an array of numbers for a range. Compose its label, track, indicator, and thumbs inside `Root`.
## Anatomy
Put the track and thumbs inside `Slider.Control`, which handles pointer interaction. This tree shows a single-thumb slider.
```text theme={null}
Slider.Root
├── Slider.Label
├── Slider.Value
└── Slider.Control
└── Slider.Track
├── Slider.Indicator
└── Slider.Thumb
```
| Part | Requirement | Purpose |
| ----------- | ----------------------------- | --------------------------------------------------------------- |
| `Root` | Required | Owns the value, bounds, step, and orientation. |
| `Control` | Required | Handles pointer interaction and positions the thumbs. |
| `Track` | Required for the styled track | Shows the full value range. |
| `Thumb` | One per adjustable value | Provides a focusable handle with keyboard interaction. |
| `Label` | Recommended | Supplies a visible label; every thumb needs an accessible name. |
| `Value` | Optional | Displays the current numeric value. |
| `Indicator` | Optional | Shows the selected portion of the track. |
For a range, add a thumb for each value with its matching `index` and a distinct accessible name. Labels and numeric output stay outside `Control`, so they do not become part of the draggable area.
## Uncontrolled state
Use `defaultValue` to set the initial volume. The slider owns subsequent changes.
```tsx theme={null}
import { Slider } from 'twenty-ui/primitives/input';
export const VolumeSlider = () => (
Volume
);
```
## Controlled state
Pass `value` and update it with `onValueChange` to own the same volume in React state. The callback receives the next value and event details.
```tsx theme={null}
import { useState } from 'react';
import { Slider } from 'twenty-ui/primitives/input';
export const VolumeSlider = () => {
const [volume, setVolume] = useState(40);
return (
Volume
);
};
```
Use `onValueChange` to keep the controlled value current during an interaction. `onValueCommitted` handles the final value when the interaction finishes, for example to save it. Both callbacks are also available in uncontrolled mode without taking ownership of the value.
## Range
```tsx theme={null}
import { Slider } from 'twenty-ui/primitives/input';
export const PriceRange = () => (
Price range
);
```
Give range thumbs distinct accessible names and an `index` corresponding to their value. `minStepsBetweenValues` sets the minimum gap in steps. The root's generic value type is a number or a readonly array of numbers.
To control a range, store the array in React state and pass it through `value` and `onValueChange`, just as for a single value.
## Keyboard and appearance
Arrow keys adjust a focused thumb by a step. Home and End move it toward the bounds while respecting range constraints. `orientation="vertical"` changes the layout and keyboard direction. Use `disabled` on `Root` to prevent changes.
Set `color="success"` for the alternative palette; the default is `accent`.
## Props
The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.
### Slider.Root
CSS class applied to the element, or a function that
returns a class based on the component's state.
Color of the indicator and thumbs.
The uncontrolled value of the slider when it's initially rendered.
To render a controlled slider, use the `value` prop instead.
Whether the slider should ignore user interaction.
Identifies the form that owns the slider inputs.
Useful when the slider is rendered outside the form.
Options to format the value.
The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
The locale used by `Intl.NumberFormat` when formatting the value.
Defaults to the user's runtime locale.
The maximum allowed value of the slider.
Should not be equal to min.
The minimum allowed value of the slider.
Should not be equal to max.
The minimum steps between values in a range slider.
Identifies the field when a form is submitted.
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
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
The component orientation.
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.
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 applied to the element, or a function that
returns a style object based on the component's state.
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
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.
The value of the slider.
For range sliders, provide an array with one value per thumb.
### Slider.Control
CSS class applied to the element, or a function that
returns a class based on the component's state.
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 applied to the element, or a function that
returns a style object based on the component's state.
### Slider.Track
CSS class applied to the element, or a function that
returns a class based on the component's state.
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 applied to the element, or a function that
returns a style object based on the component's state.
### Slider.Indicator
CSS class applied to the element, or a function that
returns a class based on the component's state.
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 applied to the element, or a function that
returns a style object based on the component's state.
### Slider.Thumb
A string value forwarded to the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
Ignored when `getAriaValueText` is provided.
CSS class applied to the element, or a function that
returns a class based on the component's state.
Whether the thumb should ignore user interaction.
A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
This is important for screen reader users.
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.
A ref to access the nested input element.
A blur handler forwarded to the `input`.
A focus handler forwarded to the `input`.
A keydown handler forwarded to the `input`.
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 applied to the element, or a function that
returns a style object based on the component's state.
Optional tab index attribute forwarded to the `input`.
### Slider.Label
CSS class applied to the element, or a function that
returns a class based on the component's state.
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 applied to the element, or a function that
returns a style object based on the component's state.
### Slider.Value
CSS class applied to the element, or a function that
returns a class based on the component's state.
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 applied to the element, or a function that
returns a style object based on the component's state.