Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form.

Options to format the value.

Returns the name of the thumb at an index. Give one to a range slider, so each thumb has its own name. A single-thumb slider takes its name from aria-label when this isn't set.

Returns the text a screen reader reads for a thumb's value, for example "5 to 10 GB".

Classes for the filled part of the track.

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.

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.

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

Classes for every thumb.

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.

Classes for the track.

The value of the slider. For range sliders, provide an array with one value per thumb.

The visual style of the component.