upstream-twenty/packages/twenty-docs/snippets/ui/generated/input/slider.mdx

{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
 *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
 *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
 *                              |___/
 *
 * This file is generated from the documentation data in packages/twenty-ui/generated.
 * To update it, edit the component prop types or design tokens in twenty-ui and run:
 *   npx nx generate:ui twenty-docs
 */}

### Slider.Root

<ParamField body="Root.className" type="string | ((state: SliderRootState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Root.color" type="&quot;accent&quot; | &quot;success&quot;" default="accent">
  Color of the indicator and thumbs.
</ParamField>

<ParamField body="Root.defaultValue" type="number | readonly number[]">
  The uncontrolled value of the slider when it's initially rendered.

  To render a controlled slider, use the `value` prop instead.
</ParamField>

<ParamField body="Root.disabled" type="boolean" default="false">
  Whether the slider should ignore user interaction.
</ParamField>

<ParamField body="Root.form" type="string">
  Identifies the form that owns the slider inputs.
  Useful when the slider is rendered outside the form.
</ParamField>

<ParamField body="Root.format" type="NumberFormatOptions">
  Options to format the value.
</ParamField>

<ParamField body="Root.largeStep" type="number" default="10">
  The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
</ParamField>

<ParamField body="Root.locale" type="LocalesArgument">
  The locale used by `Intl.NumberFormat` when formatting the value.
  Defaults to the user's runtime locale.
</ParamField>

<ParamField body="Root.max" type="number" default="100">
  The maximum allowed value of the slider.
  Should not be equal to min.
</ParamField>

<ParamField body="Root.min" type="number" default="0">
  The minimum allowed value of the slider.
  Should not be equal to max.
</ParamField>

<ParamField body="Root.minStepsBetweenValues" type="number" default="0">
  The minimum steps between values in a range slider.
</ParamField>

<ParamField body="Root.name" type="string">
  Identifies the field when a form is submitted.
</ParamField>

<ParamField body="Root.onValueChange" type="((value: TValue extends number ? number : TValue, eventDetails: SliderRootChangeEventDetails) =&gt; 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
</ParamField>

<ParamField body="Root.onValueCommitted" type="((value: TValue extends number ? number : TValue, eventDetails: SliderRootCommitEventDetails) =&gt; 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
</ParamField>

<ParamField body="Root.orientation" type="&quot;horizontal&quot; | &quot;vertical&quot;" default="horizontal">
  The component orientation.
</ParamField>

<ParamField body="Root.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderRootState&gt;">
  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.
</ParamField>

<ParamField body="Root.step" type="number" default="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.
</ParamField>

<ParamField body="Root.style" type="CSSProperties | ((state: SliderRootState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="Root.thumbAlignment" type="&quot;center&quot; | &quot;edge&quot; | &quot;edge-client-only&quot;" default="edge">
  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
</ParamField>

<ParamField body="Root.thumbCollisionBehavior" type="&quot;none&quot; | &quot;push&quot; | &quot;swap&quot;" default="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.
</ParamField>

<ParamField body="Root.value" type="number | readonly number[]">
  The value of the slider.
  For range sliders, provide an array with one value per thumb.
</ParamField>

### Slider.Control

<ParamField body="Control.className" type="string | ((state: SliderControlState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Control.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderControlState&gt;">
  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.
</ParamField>

<ParamField body="Control.style" type="CSSProperties | ((state: SliderControlState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Slider.Track

<ParamField body="Track.className" type="string | ((state: SliderTrackState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Track.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderTrackState&gt;">
  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.
</ParamField>

<ParamField body="Track.style" type="CSSProperties | ((state: SliderTrackState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Slider.Indicator

<ParamField body="Indicator.className" type="string | ((state: SliderIndicatorState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Indicator.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderIndicatorState&gt;">
  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.
</ParamField>

<ParamField body="Indicator.style" type="CSSProperties | ((state: SliderIndicatorState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Slider.Thumb

<ParamField body="Thumb.aria-valuetext" type="string">
  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.
</ParamField>

<ParamField body="Thumb.className" type="string | ((state: SliderThumbState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Thumb.disabled" type="boolean" default="false">
  Whether the thumb should ignore user interaction.
</ParamField>

<ParamField body="Thumb.getAriaLabel" type="((index: number) =&gt; string) | null">
  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`.
</ParamField>

<ParamField body="Thumb.getAriaValueText" type="((formattedValue: string, value: number, index: number) =&gt; string) | null">
  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.
</ParamField>

<ParamField body="Thumb.index" type="number">
  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.
</ParamField>

<ParamField body="Thumb.inputRef" type="Ref&lt;HTMLInputElement&gt;">
  A ref to access the nested input element.
</ParamField>

<ParamField body="Thumb.onBlur" type="FocusEventHandler&lt;HTMLInputElement&gt;">
  A blur handler forwarded to the `input`.
</ParamField>

<ParamField body="Thumb.onFocus" type="FocusEventHandler&lt;HTMLInputElement&gt;">
  A focus handler forwarded to the `input`.
</ParamField>

<ParamField body="Thumb.onKeyDown" type="KeyboardEventHandler&lt;HTMLInputElement&gt;">
  A keydown handler forwarded to the `input`.
</ParamField>

<ParamField body="Thumb.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderThumbState&gt;">
  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.
</ParamField>

<ParamField body="Thumb.style" type="CSSProperties | ((state: SliderThumbState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="Thumb.tabIndex" type="number">
  Optional tab index attribute forwarded to the `input`.
</ParamField>

### Slider.Label

<ParamField body="Label.className" type="string | ((state: SliderRootState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Label.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderRootState&gt;">
  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.
</ParamField>

<ParamField body="Label.style" type="CSSProperties | ((state: SliderRootState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### Slider.Value

<ParamField body="Value.className" type="string | ((state: SliderValueState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Value.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, SliderValueState&gt;">
  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.
</ParamField>

<ParamField body="Value.style" type="CSSProperties | ((state: SliderValueState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>